grid

Summary

Foundation of a two-dimensional grid-based layout system. Defines an element as part of a grid and permits those elements to be displayed differently than the flow order. Also used as a shorthand for setting all the explicit grid properties (grid-template-rows, grid-template-columns, and grid-template-areas), as well as all the implicit grid properties (grid-auto-rows, grid-auto-columns, and grid-auto-flow), in a single declaration. If the <grid-auto-rows> value is omitted, it is set to the value specified for grid-auto-columns. Other omitted values are set to their initial values.

Overview table

Initial value

See individual properties

Applies to

Grid containers, Grid layout

Inherited

No

Media

visual

Computed value

See individual properties

Animatable

No

CSS Object Model Property
:

Percentages

See individual properties

Syntax

• grid: <grid-auto-columns> / <grid-auto-rows>
• grid: <grid-auto-flow>
• grid: <grid-template>

Values

<grid-template>

Itself a shorthand property, see grid-template for details.

<grid-auto-flow>

See grid-auto-flow for details.

<grid-auto-columns> / <grid-auto-rows>

See grid-auto-columns and grid-auto-rows for details.

Examples

#grid {
      display: grid;
      grid-template-columns: auto minmax(min-content, 1fr);
          grid-template-rows: auto minmax(min-content, 1fr) auto
  }
  #prdName    { grid-column: 1; grid-row: 1 }
  #grossPrice    { grid-column: 1; grid-row: 3 }
  #retailPrice   { grid-column: 1; grid-row: 2; justify-self: start }
  #discount    { grid-column: 2; grid-row: 1 / span 2; }
  #finalPrice { grid-column: 2; grid-row: 3; align-self: center}