Webinar Replay: CSS Grid and Flexbox, Which Should You Use?

Webinar Replay: CSS Grid and Flexbox, Which Should You Use?
https://www.facebook.com/wpzoneco/videos/1723323054382494/

 

In this video tutorial, we discuss two incredible CSS tools: CSS Grid and Flexbox.

Incredibly valuable for building responsive layouts that look incredible on all screen devices, CSS Grid and Flexbox open up a world of amazing designs and website aesthetics.

In the webinar, we demonstrate both tools and discuss the pros and cons of both. We also show users how they can use both tools concurrently.

.et_pb_column {
 display: grid;
 grid-template-columns: auto auto auto auto auto;
 height: 100vh;
 justify-content: space-between;
}

.et_pb_module {
 display: flex;
 flex-direction: column;
 justify-content: space-evenly;
}

.et_pb_row {
 width: 100%;
 max-width: 100%;
}

/* Example Two */

.et_pb_column {
 display: grid;
 grid-column-gap: 4px;
 grid-row-gap: 4px;
 grid-template-columns: 33% 33% 33%;
 grid-template-areas:
 “left left right”
 “down down right”
 “one two two”;
}

.et_pb_column .et_pb_module:nth-child(1) {
 grid-area: left;
}

.et_pb_column .et_pb_module:nth-child(2) {
 grid-area: right;
}

.et_pb_column .et_pb_module:nth-child(3) {
 grid-area: down;
}

.et_pb_column .et_pb_module:nth-child(4) {
 grid-area: one;
}

.et_pb_column .et_pb_module:nth-child(5) {
 grid-area: two;
}

.et_pb_module {
 height: 100%;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}
If you’d like to learn more about using CSS and Flexbox in your Divi designs, have a look at the following blog posts from the Divi Space blog, “How to Set Equal Column Heights using Flexbox“.

The CSS Grid and Flexbox, Which Should You Use? webinar was just a small taste of the incredible knowledge that SJ James has to offer! As one of the trailblazers in the Divi community, SJ James has years of experience with the Divi framework and certainly knows how to work well with it.

 

If you loved the content of the webinar and loved learning from SJ, then have a look at our online course!

Divi Space has recently launched the Transforming Divi with CSS & jQuery Course, and we’d love for you to join us! Here is a sneak peek of whats included in the course:

  • Private Facebook Group
  • Introduction to CSS
  • Introduction to jQuery
  • Five real world examples where custom CSS has been used to make Divi better
  • The jQuery Cheat Sheet
  • Moving & Replacing with jQuery
  • Preparing a child theme for jQuery & CSS
  • Bonus: Inserting Layouts in Template Pages
  • Bonus: Editing Modules

For more information about the Transforming Divi with CSS and jQuery course, read this blog post or sign up now!

Lisa-Robyn Keown

Lisa-Robyn is a qualified copywriter and brand strategist from Cape Town, South Africa.