CSS

The Interactive Guide to CSS Grid

Creating layouts for your items which are responsive has never been easier, now that CSS Grids are broadly supported by most modern browsers. In the past, instead of using grids, floats were often used which led to many strange behaviours. Below, we'll cover the key features of the grid box, and how to use it.

With CSS grid, you define the grids, usually with grid-template-columns and grid-template-rows, and then place items on that grid, so you have complete control over where your content appears.

Create a Grid Box

grid-template-columns:

justify-items:

align-items:

row-gap:

px

column-gap:

px

1
2
3
4

Item 1 rows from to and columns from to

Item 2 rows from to and columns from to

Item 3 rows from to and columns from to

Item 4 rows from to and columns from to

Code from Generator

css Copy
.item-1 { grid-column: 1; grid-row: 1; } .item-2 { grid-column: 4/5; grid-row: 2/3; } .item-3 { grid-column: 1/2; grid-row: 3/5; } .item-4 { grid-column: 3/4; grid-row: 4/5; }
html Copy
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div>

To make grid work, the container element has to have display: grid; attached to it. We can also do inline-grid for creating grids which are inline with the text.

We then can set up the grid-template-columns, and also grid-row-columns if we want to. These two properties define how many rows and columns appear in the grid.

css Copy
.container { display: grid; grid-template-columns: 20% 20% 20% 20% 20%; row-gap: 1px; column-gap: 1px; }

Properties for Containers

See below for a reference of the key grid elements and how they work.

grid-template-columns

Sets the number of columns for the grid element. Different columns are separated by a space. You can have as many columns as you want.

grid-template-columns:

1
2
3
4
css Copy
.container { display: grid; grid-template-columns: 20% 20% 20% 20% 20%; }

grid-template-rows

Sets the number of rows for the grid element. Different rows are separated by a space. You can have as many rows as you want.

grid-template-rows:

1
2
3
4
css Copy
.container { display: grid; grid-template-rows: 60px 60px 60px 60px 60px; }

justify-items

Sets the position of items along the column axis, i.e. whether they should be left aligned or stretched.

justify-items:

1
2
3
4
css Copy
.container { display: grid; justify-items: start; }

align-items

Sets the position of items along the row axis, i.e. whether it should be aligned at the top, bottom, center or stretched.

align-items:

1
2
3
4
css Copy
.container { display: grid; align-items: start; }

row-gap/column-gap

Sets the gap between the different columns and rows in a grid.

row-gap:

px

column-gap:

px

1
2
3
4
css Copy
.container { display: grid; row-gap: 2px; column-gap: 2px; }

Properties for Items

There are also properties that can be applied to individual items in a grid. Below is a reference of those items.

grid-column/grid-row

Sets the position of the item within the grid. Can be condensed to grid-area: [row-start] / [column-start] / [row-end] / [column-end].

Item 1 rows from to and columns from to

1
css Copy
.item { display: grid; row-gap: 2px; column-gap: 2px; }

align-self

Align a particular item along the row axis.

align-self:

1
css Copy
.container { display: grid; align-self: normal; }

justify-self

Align a particular item along the column axis.

justify-self:

1
css Copy
.container { display: grid; justify-self: normal; }
Last Updated Sunday, 7 March 2021
Click to Subscribe Subscribed

Subscribe

Subscribe to stay up to date with our latest posts via email. You can opt out at any time.

Not a valid email