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;
}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!
I would LOVE to see you guys come up with a course with 10 hours of this stuff. Thanks!
In your first example, your images were the same size. The last item in the flex is longer for a reason, of which i still have yet to discover lol. It seems to be something flex box just does, to me, naturally.
I also would like to know if there its a higher resolution version of this, I cannot read anything that is being typed and it makes it hard to follow along.
is it possible to watch this tutorial somewhere with a higher resolution? I love it!! But I cannot see the actual steps you do inside the inspector and Stylebot which has some extra clues for understanding the process.
Hi enjoyed the tutorial, just wanting to know if you have a divi slider on the left side say 50% and to the right of it then a grid of 4 call to action modules or blurbs to fill in the right side – two up top – two underneath each other, how to make the slider fit the same height then as the right hand side? It doesn’t seem to work.
Excellent tutorial guys, that was really helpful & I can put that all to immediate use. Looking forward to the next instalment!
This is the best CSS Tutorial I’ve ever seen!!!!
This is awesome! I have used flex a little bit and it is great, I had no knowledge of grid so this is awesome to see how to use them together!! Hoping in a bit to get the course. I also hadn’t used stylebot only the chrome inspect, so thanks for the heads up on the tool!