Last updated:

An introduction to the CSS Grid module

Go back to HTML and CSS Index

Previously we saw how we could activate and use the CSS Flexbox module to create a flexible grid. This time, we will look at a different way of doing just that - using the CSS Grid.

display: grid

To activate the CSS grid module, you have to declare a grid container of some sort. Here's an example:

The HTML

<section class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
</section>
10.10 | Creating a grid container

The CSS

.grid {
display: grid;
}
10.11 | display: grid

Example

1
2
3

As a standard, the children of a grid container are placed in a row beneath each other - unlike the Flexbox module, where the flexbox children were placed next to each other - and each element take up the full width of the parent grid container.

grid-template-rows

The height of each grid row initially depends on the content but it is possible to adjust it:

.grid {
display: grid;
grid-template-rows: 50px 50px 50px;
}
10.12 | grid-template-rows

In the example above we create 3 rows that each have a height of 100px. We may also write that in a different way:

.grid {
display: grid;
grid-template-rows: repeat(3, 50px);
}
10.13 | grid-template-rows

Example

1
2
3

If we want more rows, or if we want our rows to differ in height, we adjust it:

.grid {
display: grid;
grid-template-rows: 100px 200px;
}
10.14 | grid-template-rows

Example

1
2
3

In the example above, we only define two rows - one with a height of 100px and the other with a height of 200px. For any row below that, the height will fit the content.

grid-template-columns

We may also use the grid container to set up our grid elements next to each other. To do so, we set the grid-template-columns property:

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
10.15 | grid-template-columns

Example

1
2
3

In the example, we use the grid-template-columns property to create three equal size columns.

The 1fr sizing unit is short for 1 fraction. If you only have 1fr times 1, the column will have a width of 100%. If you have two columns that each take up 1fr, each will take up 50%. Three columns, 33.33%. Four columns 25%.

The only thing that you have to be aware of when using the fr sizing unit, is that the code editor is likely to throw you an error - just ignore that. The CSS Grid is quite new, that's why.

You may of course also define the width of the columns using either px or % values.

More examples

As you can tell from the examples above, there are several ways to define the width and height of the grids. In the examples, we went with equal size rows and columns, but we can also create a grid where the rows and/or columns each have a different width and/or height:

CSS

section {
display: grid;
grid-template-columns: 100px 50%;
}
10.16 | Mix of px and %

Example

1
2

Another sizing unit, that we can use is the fr unit.

With the fr unit we can create a flexible grid like we've previously done with Flexbox. The unit represent a brøkdel of the available space in the grid container. Let's have a look at some examples:

CSS

section {
display: grid;
grid-template-columns: 1fr 1fr;
}
10.17 | 2 equal size columns, each taking up 50%

Example

1
2

In the example 10.17, the two columns take up 1/2 of the available space. Let's look at a different example:

CSS

section {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
}
10.18 | 3 columns that each take up 1/5, 3/5 and 1/5 of the available space

Example

1
2
3

As you can probably tell, the CSS Grid leaves us with a ton of options when it comes to creating rows and columns with a either fixed or flexible height and/or width.

The grid-gap property

To create a space, or gap, between the grids, you use the grid-gap property:

CSS - the grid gap property

section {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
10.19 | 2 columns with a 10px space between them

Example

1
2

Assignment

Create a gallery like this using the CSS Grid. Use the grid to adjust the size of the grids, and use object-fit on the images to make them fit inside the grid (make sure to also set the height of the images).