CSS Grid - grid template areas

Go back to HTML and CSS Index

Last time we had an introduction to the CSS grid - this time we will have a deeper look into some of the new properties that come with the CSS Grid.

grid-template-areas

The grid-template-areas property makes it possible to insert the grid items in specific areas:

The CSS

body {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"a a"
"b c"
"d d";
}
.eleA {
grid-area: a;
}
.eleB {
grid-area: b;
}
.eleC {
grid-area: c;
}
.eleD {
grid-area: d;
}
10.20 | The grid-template-areas property

Example

1
2
3
4

You use the grid-template-areas property to place the elements in relation to one another by calling them by a grid-area name. To make this work, you then give each grid item a name.

In the example above, we create a grid with two columns. We then say that both the first two grid columns have to be filled with the grid item with the grid-area: a. On the next row, we fill in the first column with the grid item with grid-area: b, and the second with the one with grid-area: c. In the last row, both columns are filled with the grid item with grid-area: d.

If you want to leave some spaces empty, you fill in with a . (dot):

The CSS

body {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
". . a"
"b b c"
"d d d";
}
header {
grid-area: a;
}
main {
grid-area: b;
}
aside {
grid-area: c;
}
footer {
grid-area: d;
}
10.21 | The grid-template-areas property with whitespace