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:
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.
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.