grid-template

grid-template combines grid-template-rows, grid-template-columns, and grid-template-areas. It applies to a grid container and describes the explicit grid, leaving auto-flow and auto-track sizing alone.

Two rows and two columns

Before the slash are two row sizes: 50px and 80px. After it are two column sizes. Four children make the boundaries visible.

<div class="layout">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

.layout {
  display: grid;
  grid-template: 50px 80px / 1fr 2fr;
  gap: 0.5rem;
}
.layout > * {
  padding: 0.75rem;
  background: #dbeafe;
  overflow-wrap: anywhere;
}

Name the major regions

Each quoted string describes one row of area names. The size after that string sizes the row, and the sizes after the slash define the columns.

<section class="layout">
  <h2 class="title">Workshop notes</h2>
  <p class="note">Bring a notebook.</p>
  <p class="content">Start with the smallest working example.</p>
</section>

.layout {
  display: grid;
  grid-template: "title title" auto "note content" minmax(5rem, auto) / minmax(
      0,
      1fr
    ) minmax(0, 2fr);
  gap: 0.5rem;
}
.title {
  grid-area: title;
}
.note {
  grid-area: note;
}
.content {
  grid-area: content;
}
.layout > * {
  padding: 0.75rem;
  background: #dbeafe;
  overflow-wrap: anywhere;
}

Values and resets

none resets all three template properties to none, their initial values. None does not disable Grid; implicit tracks may still be created. The constituent properties are not inherited.

The rows/columns form uses a slash. The area-string form can combine names and row sizes; omitted row sizes are auto. Every string needs the same number of cells and each named area must form a rectangle. Repeat notation cannot be used arbitrarily in the quoted-area form.

Choose the right shorthand

Unlike grid, this shorthand does not reset grid-auto-flow, grid-auto-rows, or grid-auto-columns. Neither shorthand sets display:grid or gap. A row list such as 100px 1fr defines two rows, not three; fractional row sizing also depends on available height.

Learn grid-template-areas for area validation and grid-template-rows for row sizing.

Sources and browser support

MDN: grid-template describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.

CSS Grid specification defines track sizing, shorthand resets, and placement.