CSS: grid-template-areas

By Xah Lee. Date: . Last updated: .

What is grid-template-areas

The property grid-template-areas is a convenient visual way to specify which neighboring grid cells are connected forming one area (span rows or column or both.). Like this:

.x {
 display: grid;

 /* create a 3 by 2 grid. */
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(3, 1fr);

 /* define which cells are connected */
 grid-template-areas:
  "A A"
  "B C"
  "D D";
 /* this means, 3 rows, because there 3 strings.
 The first row is a single area, named A.
 The 3rd row is a single area, named D.
 B and C are names for the second row columns.
 Names can be any, but single letter makes it clear.
 */
}

then, for each grid item, you use grid-area to set which named area it belong to.

grid-template-areas is best understood by many examples.

Note, using grid-template-areas is not necessary. You can create all possible grid layout by just using grid-row and grid-column. But grid-template-areas makes it easy and visual to setup layout.

Example. 2x2. normal.

1
2
3
4
<div class="x2x2-norm">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
</div>
.x2x2-norm {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(2, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a b"
  "c d";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: a;
 }
 > :nth-child(2) {
  grid-area: b;
 }
 > :nth-child(3) {
  grid-area: c;
 }
 > :nth-child(4) {
  grid-area: d;
 }
}

Example. 2x2. 1 row span.

1
2
3
<div class="x2x2-1rowspan">
 <div>1</div>
 <div>2</div>
 <div>3</div>
</div>
.x2x2-1rowspan {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(2, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a a"
  "c d";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: a;
 }
 > :nth-child(2) {
  grid-area: c;
 }
 > :nth-child(3) {
  grid-area: d;
 }
}

Example. 2x2. 1 col span.

1
2
3
<div class="x2x2-1colspan">
 <div>1</div>
 <div>2</div>
 <div>3</div>
</div>
.x2x2-1colspan {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(2, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a b"
  "a d";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: a;
 }
 > :nth-child(2) {
  grid-area: b;
 }
 > :nth-child(3) {
  grid-area: d;
 }
}

Example. 2x2. 2 row span.

1
2
<div class="x2x2-2rowspan">
 <div>1</div>
 <div>2</div>
</div>
.x2x2-2rowspan {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(2, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a a"
  "b b";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: a;
 }
 > :nth-child(2) {
  grid-area: b;
 }
}

Example. 2x2. 2 col span.

1
2
<div class="x2x2-2colspan">
 <div>1</div>
 <div>2</div>
</div>
.x2x2-2colspan {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(2, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a b"
  "a b";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: a;
 }
 > :nth-child(2) {
  grid-area: b;
 }
}

Example. L-shape bad.

L-shape like below wont work. 

.x2x2-lshape {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(2, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a b"
  "a a";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: a;
 }
 > :nth-child(2) {
  grid-area: b;
 }
}

Example. 2x2. One single area.

1
<div class="x2x2-1area">
 <div>1</div>
</div>
.x2x2-1area {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(2, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a a"
  "a a";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: a;
 }
}

Use dot for empty cell.

1
2
3
<div class="x2x2-onedot">
 <div>1</div>
 <div>2</div>
 <div>3</div>
</div>
.x2x2-onedot {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(2, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  ". b"
  "c d";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: b;
 }
 > :nth-child(2) {
  grid-area: c;
 }
 > :nth-child(3) {
  grid-area: d;
 }
}

Example. 2x2. two dot.

1
2
<div class="x2x2-2dot">
 <div>1</div>
 <div>2</div>
</div>
.x2x2-2dot {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(2, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  ". b"
  "c .";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: b;
 }
 > :nth-child(2) {
  grid-area: c;
 }
}

Example. 3x3 grid. case one

1
2
3
4
5
6
7
<div class="x3x3-caseone">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 <div>7</div>
</div>
.x3x3-caseone {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(3, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a b c"
  "a e f"
  "a h i";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: a;
 }
 > :nth-child(2) {
  grid-area: b;
 }
 > :nth-child(3) {
  grid-area: c;
 }
 > :nth-child(4) {
  grid-area: e;
 }
 > :nth-child(5) {
  grid-area: f;
 }
 > :nth-child(6) {
  grid-area: h;
 }
 > :nth-child(7) {
  grid-area: i;
 }
}

Example. 3x3 grid. midcol

1
2
3
4
5
6
7
<div class="x3x3-midcol">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 <div>7</div>
</div>
.x3x3-midcol {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(3, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a b c"
  "d b e"
  "f b h";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: a;
 }
 > :nth-child(2) {
  grid-area: b;
 }
 > :nth-child(3) {
  grid-area: c;
 }
 > :nth-child(4) {
  grid-area: d;
 }
 > :nth-child(5) {
  grid-area: e;
 }
 > :nth-child(6) {
  grid-area: f;
 }
 > :nth-child(7) {
  grid-area: h;
 }
}

Example. 3x3 grid. one box

1
2
3
4
5
6
<div class="x3x3-onebox">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
</div>
.x3x3-onebox {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(3, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a a b"
  "a a c"
  "d e f";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: a;
 }
 > :nth-child(2) {
  grid-area: b;
 }
 > :nth-child(3) {
  grid-area: c;
 }
 > :nth-child(4) {
  grid-area: d;
 }
 > :nth-child(5) {
  grid-area: e;
 }
 > :nth-child(6) {
  grid-area: f;
 }
}

Example. 3x3 grid. 1 col 1 box

1
2
3
4
<div class="x3x3-1col1box">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
</div>
.x3x3-1col1box {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(3, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a b b"
  "a b b"
  "a c d";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: a;
 }
 > :nth-child(2) {
  grid-area: b;
 }
 > :nth-child(3) {
  grid-area: c;
 }
 > :nth-child(4) {
  grid-area: d;
 }
}

Important tips

First, use grid-template-columns and grid-template-rows to setup the widths of the grid lines.

The number of items in grid-template-rows is your grid row count. The number of items in grid-template-columns is your grid column count.

now, you have a grid of size m by n.

then, use grid-template-areas to create a visual layout

.x {
 display: grid;

 /* create a 3 by 4 grid. */
 grid-template-columns: repeat(4, 1fr);
 grid-template-rows: repeat(3, 1fr);

 /* define which cells are connected to which */
 grid-template-areas:
  "a b b c"
  "a b b d"
  "a e f g";
}

if you have 3 by 4 grid, your grid-template-areas value should be 3 strings (means 3 rows), each string has 4 items (because you have 4 columns).

the number of distinct names in the value of grid-template-areas, is the number of child items you should have in the grid HTML element.

for each child item, use grid-area to say which named area it belongs.

Example. Standard homepage grid layout

header
main. good morn.
sidebar
footer
<div class="xgrid-tpl-area-qJn4C">
 <div class="header">header</div>
 <div class="main">main. good morn.</div>
 <div class="sidebar">sidebar</div>
 <div class="footer">footer</div>
</div>
.xgrid-tpl-area-qJn4C {
 display: grid;
 grid-template-columns: 1fr 4fr;
 grid-template-rows: auto auto;
 margin: 15px;
 gap: 1px;

 grid-template-areas:
  "aa aa"
  "bb cc"
  "dd dd";

 > * {
  border: solid 2px silver;
 }
 > .main {
  grid-area: cc;
  height: 60px;
 }
 > .header {
  grid-area: aa;
 }
 > .sidebar {
  grid-area: bb;
 }
 > .footer {
  grid-area: dd;
 }
}

CSS grid layout