Named grid areas in CSS

Drawing the layout as a picture, then dropping elements into named cells.

.page {
  display: grid;
  grid-template-columns: 16rem 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "side   main"
    "footer footer";
  min-height: 100vh;
}

.page > header { grid-area: header; }
.page > aside  { grid-area: side; }
.page > main   { grid-area: main; }
.page > footer { grid-area: footer; }

How it works

1. grid-template-areas is an ASCII map of the layout.
2. A dot marks a cell left deliberately empty.
3. Each child claims its cell with grid-area.

Keywords and builtins used here

• display
• grid
• page
• rem
• vh

The run, in numbers

Lines

15

Characters to type

329

Tokens

73

Three-star pace

80 tpm

At the three-star pace of 80 tokens a minute, this run takes about 55 seconds.

Type this snippet

Step 3 of 7 in Grid, step 9 of 24 in Flexbox & grid.

← Previous Next →