CSS Grid vs CSS Flexbox
We will consolidate the two spreadsheets into a single spreadsheet with what I consider the optimal versions of each design pattern while acknowledging the good and bad of each version.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Mastering CSS Layout course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Mastering CSS Layout, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:10] We'll come back to everybody. So in this module, we're going to talk about some best practices when using these as well as some extra layout techniques that I would recommend you implement.
[00:11 - 00:12] First of all, which technique is best? This is the age of questions.
[00:13 - 00:21] And the answer is it depends. But in general purpose layouts, there are some techniques that work better than others.
[00:22 - 00:32] In the case of the stack pattern, both the flex box and grid can be used to create the stack pattern. Either technique is better and just use the technique that makes most sense for you and your layouts.
[00:33 - 00:41] In the inline cluster pattern, both flex box and grid were able to do the inline requirement. The only flex box could achieve the cluster requirement.
[00:42 - 00:49] I would therefore recommend use flex box for this pattern. The split pattern, both flex box and grid was able to use this pattern.
[00:50 - 00:59] The grid was a more simple pattern to implement, but flex box allowed us more responsive capabilities. Generally speaking, I would recommend using flex box for this pattern.
[01:00 - 01:12] The cover pattern, both flex box and grid were able to achieve this pattern. Both techniques were easy to implement, but flex box achieves a little bit more accurate results when combined with other elements either on top or bottom.
[01:13 - 01:23] So I recommend using flex box in this case, the center pattern. For most of it, it didn't even use either flex box or grid.
[01:24 - 01:30] And for the little it did, either technique worked just as well. So use the technique that makes the most sense to you.
[01:31 - 01:43] Now, the column drop can only be achieved using flex box, so therefore you have to use flex box. And the grid pattern can really only be used using CSS grid, so therefore use CSS grid.
[01:44 - 01:48] So in the next lesson, we're going to go over some other layout techniques that I would highly recommend that you implement.