CSS: grid-area

What is grid-area

grid-area is a shorthand for grid-row and grid-column.

• grid-row is a shorthand for grid-row-start and grid-row-end.
• grid-column is a shorthand for grid-column-start and grid-column-end.

• CSS: grid-row, grid-column (grid item position and span)

Basic syntax

grid-area: row_start / col_start / row_end / col_end

or, value can be a name defined by grid-template-areas.

grid-area: named_area

• CSS: grid-template-areas

Example. Define row col start end

.x {
 grid-area: 1 / 2 / 3 / 4;
}

/* is equivalent to */

.x {
 grid-row: 1 / 3;
 grid-column: 2 / 4;
}

/* is equivalent to */

.x {
 grid-row-start: 1;
 grid-column-start: 2;
 grid-row-end: 3;
 grid-column-end: 4;
}

Example. Using name with grid-template-area.

.x {
 display: grid;
 grid-template-columns: 1fr 4fr;
 grid-template-rows: auto auto;
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a a"
  "b c"
  "d d";
 > * {
  border: solid 2px silver;
 }
 > .main {
  grid-area: c;
  height: 60px;
 }
 > .header {
  grid-area: a;
 }
 > .sidebar {
  grid-area: b;
 }
 > .footer {
  grid-area: d;
 }
}