CSS Grid can be scary. It looks complicated and you might not even know where to start. If you want to get started quickly with CSS grid, I highly recommend Grid Garden. It an interactive learning module for CSS grid. It covers a lot of important concepts about CSS grid. It will probably take you only 20 mins to go through and you will feel like you can start using CSS grid in your code base.

The tutorial won’t cover all the CSS grid properties, but all the essentials.

Now, if you want to get good at CSS grid, these are the properties you need to cover. This is a list of grid properties you want to know. Go through Grid Garden & fill the gap by researching a little bit about the properties that weren’t covered. Then, you’ll be an expert.

1. Essentials

– grid-column-end
– grid-column-start
– grid-template-rows
– grid-template-columns

2. To express rules more concisely

– grid
– grid-area
– grid-column
– grid-gap
– grid-row
– grid-template
– grid-template-areas

3. Adjust alignment

– align-content
– align-items
– align-self
– grid
– grid-area
– grid-column
– grid-gap
– grid-row
– grid-template
– grid-template-areas
– justify-content
– justify-items
– justify-self

4. To define every little thing about grid layout

– grid-auto-column
– grid-auto-flow
– grid-auto-rows
– grid-column-gap
– grid-row-gap
– order