name: Grid
description: CSS grid is a two-dimensional layout system, which lays content out in rows and columns.
spec: https://drafts.csswg.org/css-grid-3/
group: grid
caniuse: css-grid
status:
  compute_from: css.properties.grid
compat_features:
  - css.properties.align-content.context_grid
  - css.properties.align-items.context_grid
  - css.properties.align-self.context_grid
  - css.properties.column-gap.grid_context
  - css.properties.display.grid
  - css.properties.display.inline-grid
  - css.properties.gap
  - css.properties.gap.grid_context
  - css.properties.gap.grid_context.calc_values
  - css.properties.gap.grid_context.percentage_values
  - css.properties.gap.normal
  - css.properties.grid
  - css.properties.grid.none
  - css.properties.grid-area
  - css.properties.grid-area.auto
  - css.properties.grid-auto-columns
  - css.properties.grid-auto-columns.auto
  - css.properties.grid-auto-columns.max-content
  - css.properties.grid-auto-columns.min-content
  - css.properties.grid-auto-flow
  - css.properties.grid-auto-flow.column
  - css.properties.grid-auto-flow.dense
  - css.properties.grid-auto-flow.row
  - css.properties.grid-auto-rows
  - css.properties.grid-auto-rows.auto
  - css.properties.grid-auto-rows.max-content
  - css.properties.grid-auto-rows.min-content
  - css.properties.grid-column
  - css.properties.grid-column.auto
  - css.properties.grid-column-end
  - css.properties.grid-column-end.auto
  - css.properties.grid-column-start
  - css.properties.grid-column-start.auto
  - css.properties.grid-row
  - css.properties.grid-row.auto
  - css.properties.grid-row-end
  - css.properties.grid-row-end.auto
  - css.properties.grid-row-start
  - css.properties.grid-row-start.auto
  - css.properties.grid-template
  - css.properties.grid-template-areas
  - css.properties.grid-template-areas.none
  - css.properties.grid-template-columns
  - css.properties.grid-template-columns.auto
  - css.properties.grid-template-columns.fit-content
  - css.properties.grid-template-columns.max-content
  - css.properties.grid-template-columns.min-content
  - css.properties.grid-template-columns.minmax
  - css.properties.grid-template-columns.none
  - css.properties.grid-template-columns.repeat
  - css.properties.grid-template-rows
  - css.properties.grid-template-rows.auto
  - css.properties.grid-template-rows.fit-content
  - css.properties.grid-template-rows.max-content
  - css.properties.grid-template-rows.min-content
  - css.properties.grid-template-rows.minmax
  - css.properties.grid-template-rows.none
  - css.properties.grid-template-rows.repeat
  - css.properties.grid-template.none
  - css.properties.justify-content.context_grid
  - css.properties.justify-items.context_grid
  - css.properties.justify-self
  - css.properties.justify-self.auto
  - css.properties.justify-self.context_grid
  - css.properties.justify-self.left
  - css.properties.justify-self.normal
  - css.properties.justify-self.right
  - css.properties.justify-self.stretch
  - css.properties.justify-self.baseline
  - css.properties.justify-self.center
  - css.properties.justify-self.end
  - css.properties.justify-self.flex-end
  - css.properties.justify-self.flex-start
  - css.properties.justify-self.self-end
  - css.properties.justify-self.self-start
  - css.properties.justify-self.start
  - css.properties.place-content.context_grid
  - css.properties.place-items.context_grid
  - css.properties.place-self.context_grid
  - css.properties.row-gap
  - css.properties.row-gap.grid_context
  - css.properties.row-gap.normal
  - css.types.flex