How to remember CSS Grid

The explicit grid

1. grid-template-columns
2. grid-template-rows
3. grid-template-areas
4. grid-column
5. grid-row
6. grid-area

Some tips to remember these 6 properties:

1. The template keyword can only be used on the grid

a) They’re used to declare grids and named areas

b) Properties with the template keyword are plural

2 .Properties for grid items do not have the template keyword

a) These properties are singular

b) These properties affect positioning

Gaps

There are three properties to remember:

1. grid-column-gap
2. grid-row-gap
3. grid-gap

grid-column-gap determines the space between columns.

grid-row-gap determines the space between rows.

grid-gap is a shorthand for grid-column-gap and grid-row-gap.

For this shorthand:

1. the column value comes first: column-gap / row-gap
2. If you use a single number, both values will be that number.

Aligning things

There are six properties to align things:

1. justify-content
2. align-content
3. justify-items
4. align-items
5. justify-self
6. align-self

Implicit Grid

Let’s say you created a CSS Grid, but you don’t have enough rows. In this example below, I only created an explicit grid for three items (3 columns, 1 row).

.grid {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-row: 3em;
}

But I have six items!

<!-- This is HTML -->
<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

When you don’t have enough space in your explicit grid, CSS Grid will help you create additional grids automatically. By default, it’ll create more rows.

If you want to switch the grid direction, you’ll set grid-auto-flow to row.

This automatically created parts are called the implicit grid.

You can adjust the automatically created column(s) or row(s) with these two properties:

1. grid-auto-columns
2. grid-auto-rows

.grid {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 3em; 
  grid-auto-rows: 6em;
}

How to remember the implicit grid

auto is the keyword you want to watch out for.

1. template creates the explicit grid
2. auto creates the implicit grid

I use the implicit grid a lot. I’ll share how I use CSS Grid in another article.

Wrapping up

That’s almost every CSS Grid property you need to know for 80% of your grids! Here’s a summary of the properties you learned:

Creating a grid

a. Explicit: 

1) grid-template-columns

2) grid-template-rows

3) grid-template-areas

b. Implicit:

1) grid-auto-columns

2) grid-auto-rows

c. Gaps: 

1) grid-column-gap

2) grid-row-gap

3) grid-gap

d. Positioning items in a grid:

1) grid-column

2) grid-row

e. Aligning things:

1) justify-content

2) align-content

3) justify-items

4) align-items

5) justify-self

6) align-self