grid

The grid CSS property is a shorthand property that sets all of the explicit and implicit grid properties in a single declaration.

Example

Initial value as each of the properties of the shorthand:grid-template-rows: nonegrid-template-columns: nonegrid-template-areas: nonegrid-auto-rows: autogrid-auto-columns: autogrid-auto-flow: rowgrid-column-gap: 0grid-row-gap: 0column-gap: normalrow-gap: normal
Applies to grid containers

Syntax

  
grid: repeat(3, 40px) / auto-flow;
  

Values

Defines the grid-template including grid-template-columns, grid-template-rows and grid-template-areas.
Sets up an auto-flow by setting the row tracks explicitly via the grid-template-rows property (and the grid-template-columns property to none) and specifying how to auto-repeat the column tracks via grid-auto-columns (and setting grid-auto-rows to auto). grid-auto-flow is also set to column accordingly, with dense if it’s specified. All other grid sub-properties are reset to their initial values.
Sets up an auto-flow by setting the column tracks explicitly via the grid-template-columns property (and the grid-template-rows property to none) and specifying how to auto-repeat the row tracks via grid-auto-rows (and setting grid-auto-columns to auto). grid-auto-flow is also set to row accordingly, with dense if it’s specified. All other grid sub-properties are reset to their initial values.

Browser support

grid5716524410.1

We use cookies to improve your experience. Learn more in our Privacy policy.

×