All-in-one spec

grid

Specify all of these grid properties at once: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow.

Definitions

Refer to these definitions to better understand how the property values are used.

Grid lines

Each reference to a grid line refers to the imaginary line on either side of grid cells.

For a layouts with N rows, there are N+1 horizontal grid lines — one at the top, one between each row, and one at the bottom.

For a layouts with M columns, there are M+1 vertical grid lines — one at the left edge, one between each column, and one at the right edge.

Grid lines are numbered starting at 1. For rows, the topmost line is 1 and the bottommost line is N+1. For columns, the leftmost line is 1 and the rightmost line is M+1. *

* Arabic, Hebrew and other left-to-right writing systems, reverse everything.
Grid line aliases

For clarity and ease of use, each grid line can be aliased with an arbitrary name. That alias can be used with grid-row-start, grid-row-end, grid-column-start and grid-column-end property values.

Grid line aliases are defined when specifying grid-template-rows, grid-template-columns, and grid-template-areas.

In addition, when a grid line alias is declared by the user within a grid-template-areas definition, the browser implicitly defines two other names that can be used in those start/end properties. For example, if a grid-template-areas defines an area named foo:

generated name property interpretation
'foo-start' grid-row-start The topmost line of the area
'foo-start' grid-column-start The leftmost line of the area
'foo-end' grid-row-end The bottommost line of the area
'foo-end' grid-column-end The rightmost line of the area

Property values

The syntax for the grid property can follow one of these formats:

  • fixed rows and columns
  • fixed areas
  • flexible rows
  • flexible columns

Fixed rows and columns format

This explicitly defines the grid with template columns and template rows using the rules for grid-template-rows and grid-template-columns.

display: grid;            
grid: repeat(3, 200px) / repeat(5, 1fr);
A grid with 3 rows each 200px high, and with 5 equal-sized columns

Fixed areas format

This explicitly defines the grid with template areas using the rules for grid-template-areas.

display: grid;            
grid: "a a a a a"
"b c c c d"
"e e e e e";
A grid that declares five named areas: a, b, c, d, e

Flexible rows format

Specify three properties grid-auto-flow grid-auto-rows / grid-template-columns to create a grid with fixed columns and expanding rows.

display: grid;            
grid: dense minmax(2rem, max-content) / repeat(3, 33%);
Implicit rows that are at least 2rem high, with three equal-sized columns

Flexible columns format

Specify three properties: grid-template-rows / grid-auto-flow grid-auto-columns to create a grid with fixed rows and expanding columns.

display: grid;            
grid: repeat(10, 100px) / dense minmax(10%, 50%)
Ten rows each 100px high, with implicit columns betweeen 10% and 50% wide

style > grid > gridAll-in-one spec

Q