grid

grid is a shorthand for six Grid settings: template rows, columns, areas, auto rows, auto columns, and auto flow. It configures a grid but does not create one: the container also needs display:grid or inline-grid.

Rows before the slash, columns after it

This declaration creates two 60px rows and two equal columns. The four direct children fill cells in source order.

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

.layout {
  display: grid;
  grid: repeat(2, 60px) / repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.layout > * {
  padding: 0.75rem;
  background: #dbeafe;
  overflow-wrap: anywhere;
}

Let extra cards create rows

The auto-flow form sets row-wise placement and implicit row sizing. There are three explicit columns; the fourth card creates another row at least 4rem tall.

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

.layout {
  display: grid;
  grid: auto-flow minmax(4rem, auto) / repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.layout > * {
  padding: 0.75rem;
  background: #dbeafe;
  overflow-wrap: anywhere;
}

Shorthand resets

Omitted constituent properties reset to their initial values: the three templates to none, the two auto sizes to auto, and auto flow to row. These properties are not inherited. Gap, alignment, and item placement are outside this shorthand and are not reset.

Use the template form for explicit rows/columns and optional named areas. Use an auto-flow form for implicit sizing on one axis and an explicit template on the other. Do not combine every possible longhand value into an arbitrary shorthand string.

Why a previous layout disappeared

A later grid declaration can clear grid-template-areas or earlier auto-track rules. Use grid-template when you only intend to reset the explicit template, or individual longhands for a focused change.

Dense placement may backfill holes and change visual order without changing reading or keyboard order. Grid auto flow demonstrates the difference. Keep a logical document order regardless of placement.

Sources and browser support

MDN: grid 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.