CSS grid-template-areas

Previous Next

Demo of the different values of the grid-template-areas property.

Click the property values below to see the result:

grid-template-areas: none;
grid-template-areas: 'myArea myArea .';
grid-template-areas: 'myArea myArea . .';
grid-template-areas: 'myArea myArea . . .';
grid-template-areas: 'myArea myArea .' 'myArea myArea .';
grid-template-areas: 'myArea myArea . .' 'myArea myArea . .';
grid-template-areas: '. . .' '. myArea myArea';
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6

Play more with the code in our Tryit yourself editor: Try it Yourself ❯