Using CSS Grid the right way

Violet Peña has shared her recommendations for using CSS Grid. They basically boil down to these high-level points:

1. Use names instead of numbers for setting up our grid columns.
2. fr should be our flexible unit of choice.
3. 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.

Direct Link to Article — Permalink

The post Using CSS Grid the right way appeared first on CSS-Tricks.

from CSS-Tricks https://ift.tt/2BKXbwo