Grid Areas 2 exercises

Leaving Empty Spaces in Grid Template Areas

We've defined grid-template-areas for a complex layout:

#container {
/* additional styles */
"a a a a"
"b c c d"
"b e e f"
"g g h f";


Loading lesson


0:00 When defining our grid template areas using this syntax that we see here, sometimes we may want to leave a blank space. For example, I may want this a area to span three tracks and then have an empty area on the right. However, if I just do this where I write a three times and that's it, even though it's a four by four grid, take a look at what happens.

0:24 It basically breaks. The number of cells or tracks that we reference doesn't match the actual reality of the grid. If I go back and add in a correctly, everything renders the way that we expect. To leave a blank space, what I can do is use a period. A period indicates a track in the grid that does not have a name or is not part of a grid template area that we're defining.

0:49 As you can see here, now we have a blank space there. Just keep that in mind. If you're ever trying to do something where you need an empty spot, you need a track to not be included in a grid template area, you can't just leave it off and assume the browser will figure it out. That will break everything. You need to use a period to indicate that it should be skipped or that there is no name for this particular spot.