Violet Peña has shared her recommendations for using CSS Grid. They basically boil down to these high-level points:
- Use names instead of numbers for setting up our grid columns.
fr
should be our flexible unit of choice.- We don’t really need a grid system anymore.
Although this is all great advice and Violet provides a few examples to support her recommendations, I particularly like what she has to say about learning CSS Grid:
“Learning” CSS Grid requires developing working knowledge of many new properties that don’t just describe one aspect of appearance or behavior, but feed into a completely new layout system. This system includes around 18 properties which use paradigms and syntax rarely (or never) seen anywhere else in the CSS spec.
This means that CSS Grid has a pretty high skill floor — a developer needs to learn and internalize lots of new information in order to be effective with it. Once you’re above that skill floor, Grid is an amazing ally in layout creation. Below that skill floor, Grid is an encumbrance. You wonder why you’re bothering to use it at all, since it seems to require lots of additional work for little reward.
In this post, I want to help you overcome that skill floor by showing you the most effective ways to leverage the Grid spec.
Also this post reminded me that, although I’m not sure why, I tend to avoid naming my grid columns up. Like in this bit of code that Violet walks us through:
.container {
display: grid;
grid-template-columns: [sidebar] 3fr [content] 4fr;
}
Now we can use the sidebar
or content
names when we define our grid-column
like this:
.content {
grid-column: content;
}
I really like that! It seems super easy to read and if we wanted to change the size of our .content
, class then it only requires going back to where the grid is defined in the first place. Anyway, I’ll be sure to name my grid columns from here on out.
That was super usefull for me, I did not know that I could give names in grid-template-columns, I was used to use grid-template-areas and then grid-areas to do the same work, thank you :)
I recently completed Dave Geddes’s https://gridcritters.com/ CSS grid mastery game/course, and found it to be an excellent way to learn CSS Grid. (It seems to follow the above suggestions, too, most of the time)
One reason to keep using traditional numbered column grids (like bootstrap, etc.) is to easily line up with grid aligned mockups done in a graphics editor. That may not be the way everyone rolls these days, but its still pretty dominant and IMO still the easiest way to iterate on a design.
I’ve been procrastinating on CSS Grid because of browser support, but my current thinking is that it makes the most sense to use it to manage the layout overall skeleton (to benefit from the better vertical placement) but continue to use Flexbox on most of the rest.