The Interactive Guide to CSS Grid

📣 Sponsor

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:

column-gap:

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


.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;
}


<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.


.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:


.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:


.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:


.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:


.container {
    display: grid;
    align-items: start; 
}

row-gap/column-gap

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

row-gap:

column-gap:


.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


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

align-self

Align a particular item along the row axis.

align-self:


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

justify-self

Align a particular item along the column axis.

justify-self:


.container {
    display: grid;
    justify-self: normal;
}

Last Updated 1643545196911