Wow, Grid has so many properties. Do we need them all?

I’ve been staring at a list of CSS Grid properties for the last two days. It’s been well over a year since I started learning and using Grid, but somehow I hadn’t seen a list like this before. It’s looks really intimidating.

The CSS Grid Layout Module is a massive specification, much longer than many of the others. While traveling to conferences last year, I dragged around a stack of printed specs. Most were twenty or thirty pages long. Grid seemed to be a few hundred. CSS Grid is simply much more powerful.

If you count up the new properties, there are 18:
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

You don’t need to learn all 18, however. Not at first. Many of them do the same things as the others — they just provide multiple ways to write the same syntax: long-hand, short-hand, extra-short-hand, super-duper-extra-short-hand. I found it to be too much to try and learn all the variations while learning what they do. So I recommend starting with a shorter list.

I recommend learning these first:
display: grid
grid-template-columns and grid-template-rows
grid-gap
grid-column and grid-row
That’s enough to get you coding some amazing layouts.

And then learn these:
grid-template-areas
grid-auto-flow
grid-auto-columns
grid-auto-rows
Which will give you more super power.

Then, eventually, you can learn all the rest. And decide which level of short/long hand you prefer.

To really get started, it helps to have someone explain it to you. The raw properties can be hard to figure out. Perhaps start with this MDN Guide, Basic concepts of grid layout, then read the others. Or look at my giant list of resources to find videos and other things.

Comments

As someone whose just jumping into Grid right now, it’s extremely helpful to have a priority list of the order of properties to learn. It makes the whole process a lot less overwhelming at first. I’m going to be toying with the first 6 in Firefox tomorrow. I’m pretty excited to get started, so thanks for the push in the right direction!

Add new comment

By submitting this form, you accept the Mollom privacy policy.