This page is In Progress

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

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}