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:

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-column and grid-row
That’s enough to get you coding some amazing layouts.

And then learn these:
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.


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!

Can you point me to examples of using ccs-grid with more than one grid layout in same page.
I am using the standard 12 columns and have made up a good few responsive pages.
But I would like to use the main grid and insert a minmax() function grid to the sidebar and main content only, but leaving original grid to cover rest of entries.
I may be missing something but I can,t see any examples, please point me to them and thanks your and Rachel Andrew’s excellent information.

Real And Urgent Spell Caster Reviews To Solve Your Relationship and Divorce Problems Dr. Ugo +13863369876

Hello my name is Sarah Douglas, i am here to give testimony on how this powerful spell caster called Dr. Ugo helped me to fix my relationship. i was heartbroken when my fiancee told me he is no longer interested in marrying me because another lady has used a black magic on him. I cried and sobbed every day, until it got so bad that I reached out to the Internet for help, that was when i read a review about the great work of Dr. Ugo . I then contacted him for help to get my love and my life back, he helped me cast a powerful love spell and to my greatest surprise after 24 hours of doing the love spell my Fiancee came back on his knees begging me to forgive him. We are now happily married and all thanks goes to Dr. Ugo Wonders for helping me save my relationship. you can contact Dr. Ugo through his email address or call his direct mobile number on +13863369876 website:

Add new comment

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