Prerequisites

The.com CSS

Intro

There are a few ways of creating CSS grids. In this article, you'll become familiar with two common ones. The first is by using the Grid Template Columns property and the second is by setting and using the Grid Areas and Grid Template Areas properties.

One of the keys to using CSS grids is to make sure your content is structured correctly. When a parent element is set to display grid, only its first-level children will be taken into account for the grid layout.

There are two parts to every grid layout: the parent or containing element, and the children elements. Most grid-related properties will be applied to the parent.

To make a parent element a grid, set its display property to grid. This makes every first-level child into a grid item.

By setting the display property to grid, nothing visual will happen. This is because there are no rules defining what the grid should be. You can set up the width and number of columns, but before we do that, we need to talk about a new type of unit.

Note: For this demo, each grid item has a set width of 100px to better visualize the areas they take up. Each grid item is also display-flex to center the text. Having grid items are also flexboxes or grids themselves does not interfere with the parent's grid layout.

Grid Units

In addition to using the standard pixel, rem, percentage, and view height/width units, CSS grids offer a new unit called the fraction, abbreviated fr. It is a unique unit because it depends on the width and number of columns or rows in the grid layout.

For example, we can define three columns to be 1fr wide each. This will create three columns of equal width (the fractional number for each width would be 1/3 since there are 3 columns).

We could also set the first two columns to 1fr and the third column to 5fr. This would create a three-column grid where the first two columns take up 1/7th of the screen width each, and the third column takes up 5/7ths of the screen width.

At first, the fraction unit can seem strange, so let's visualize it by setting up columns with Grid Template Columns.

Grid Template Columns Demo

Using Grid Template Columns to set up a grid is the simplest way to do so.

Our content is structured in a way where we have a parent element with six children.

Set the parent element to display grid.
Search for the Grid Template Columns property using CMD + J.
Type 1fr 1fr 1fr to create a three-column grid. You can also type repeat(3, 1fr) meaning that you want 3 columns where each is 1fr.

You can define how many columns and the width of each column in the Grid Template Columns cell. One value represents one column. Type multiple values (with units) separated by a space to define multiple columns.

Since we have six grid items, the items will wrap in order to fulfill the three-column layout that we defined.

Experiment with other layouts by trying these values:

repeat(6, 1fr)
50px 1fr 2fr 30px
100fr 300fr

Note: you can also assign row heights with Grid Template Rows, but usually it is best to have the grid rows automatically size so that all content is visible.

Grid Template Areas Demo

For more complex layouts, you may want to assign certain children to take up certain areas in your grid layout rather than having them appear one after another like above.

Grid Area Values

For this, we need to first assign the grid items a grid area name so that we can later reference it in our layout. The Grid Area property is set to the grid item, not the grid container.

Use CMD + J to search for the Grid Area
Give each grid item a unique name. They can be something like nav, section-one, top, whatever you like, just know that spaces are not allowed. In this demo, I'll give names like item1, item2, item3, etc.

Note: because we haven't set up any value in the Grid Template Areas cell, when giving grid items Grid Area values, your grid will appear broken. When troubleshooting grid issues, always check the Grid Areas values.

Next, we can define the number and widths of the columns by writing a value in the parent's Grid Template Columns cell, just like we did above. Again, I'll write 1fr 1fr 1fr.

Again, this will make the grid look even more broken but don't worry. The next step of adding values to the Grid Template Areas will fix this.

Grid Template Areas Values

As far as CSS values go, Grid Template Areas is one of the stranger ones. A valid value for a three-column layout could be:

"item1 item2 item3"
"item4 item5 item6"

Each line wrapped in quotation marks can be thought of as a row, and each word is a column.

Go to grid container's the Grid Template Areas cell.
Type in:
```
"item1 item2 item3"
"item4 item5 item6"
```

This is the same grid as in the Grid Template Columns demo. However, this is where the grid area names can make your layout more interesting. Since each word represents an area, another valid value could be:

"item6 item5 item4"
"item2 item3 item1"

Which would give this layout:

This allows you to organize and rearrange content in your grid differently than how it would be rendered as HTML.

Additionally, you could write a grid area name twice to make that section span across multiple columns or rows. Just make sure that they are adjacent to one another. For example:

"item2 item2 item4"
"item1 item3 item4"
"item5 item6 item6"

Resulting in this layout:

Note: for this last example, I changed the height of the grid item from 100px to 100%. If it is set to 100px, then it will appear like there is an empty space to the right of item 3, but that is because there is an absolute height on item 4.

If you wish to not assign a Grid Area name to the Grid Template Areas value, you can use a period to leave an empty space. For example:

"item2 item1 ."
". item3 item4"
"item5 .item6"

Which results in this layout:

Next Steps

If you are curious about the many other properties you can use related to grids, check out this more in-depth CSS Grids Guide.