Theory
Theory
Comments

The grid-template-areas property and empty grid areas

The grid-template-areas property allows certain areas to be marked as empty.

The period character . is used for this instead of the alphabetic name of the area.

For example, take the code from a previous topic where we had a grid consisting of three columns.

grid-template-areas:
  "red yellow green"
  "red yellow green"
  "red yellow green";

If we only want the last green cell to remain in the first row, then replace red and yellow on the first line with periods:

grid-template-areas:
  ".   .      green"
  "red yellow green"
  "red yellow green";

We obtain the desired result:

Let’s add empty areas to the example from the previous assignment.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The grid-template-areas property and empty grid areas</title> <link href="world.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="world"> <div class="land land--guided"> <div class="element element--water"></div> <div class="element element--grass"></div> <div class="element element--rocks"></div> <div class="element element--lava"></div> </div> </body> </html>

CSS

.land { display: grid; grid-template-areas: "w w l l" "w w l l" "g g l l" "r r r r"; } .element--water { grid-area: w; } .element--grass { grid-area: g; } .element--lava { grid-area: l; } .element--rocks { grid-area: r; }

Goalscompleted

Change the grid structure for the .land block to the following:
"w w . ."
". . l l"
"g g . ."
". . r r"

The grid-template-areas property and empty grid areas

Comments

Log in

Sign up

Restore access