GridBaseline · Widely available

CSS grid is a two-dimensional layout system, which lays content out in rows and columns.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Oct 17, 2017. Widely available since Apr 17, 2020.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–56Not supported

57+Supportedsince Mar 9, 2017

Current: 155

Edge

12–15Not supported

16+Supportedsince Oct 17, 2017

Current: 154

Firefox

1–51Not supported

52+Supportedsince Mar 7, 2017

Current: 157

Safari

1–10Not supported

10.1+Supportedsince Mar 27, 2017

Current: 27

MobileChrome Android

18–56Not supported

57+Supportedsince Mar 16, 2017

Current: 155

Firefox Android

4–51Not supported

52+Supportedsince Mar 7, 2017

Current: 157

Safari iOS

1–10Not supported

10.3+Supportedsince Mar 27, 2017

Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

CSS

.layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.layout > .featured {
  grid-column: span 2;
}

Feature detection

CSS · check before using

@supports (display: grid) {
  .layout { display: grid; }
}

Documentation (MDN)

Specification

drafts.csswg.org/css-grid-3 ↗

Usage share

caniuse.com/css-grid ↗

Sub-features

Support for each part of the feature (61). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
align-content.context_grid	57	16	52	10.1	52	52	10.3
align-items.context_grid	57	16	52	10.1	52	52	10.3
align-self.context_grid	57	16	52	10.1	52	52	10.3
column-gap.grid_context	66	16	61	12	66	61	12
display.grid	57	16	52	10.1	57	52	10.3
display.inline-grid	57	16	52	10.1	57	52	10.3
gap	57	16	52	10.1	57	52	10.3
gap.grid_context	66	16	61	12	66	61	12
gap.grid_context.calc_values	66	16	61	12.1	66	61	12.2
gap.grid_context.percentage_values	66	16	61	12	66	61	12
gap.normal	57	16	52	10.1	57	52	10.3
grid	57	16	52	10.1	57	52	10.3
grid-area	57	16	52	10.1	57	52	10.3
grid-auto-columns	57	16	70	10.1	57	79	10.3
grid-auto-flow	57	16	52	10.1	57	52	10.3
grid-auto-flow.column	57	79	52	10.1	57	52	10.3
grid-auto-flow.dense	57	79	52	10.1	57	52	10.3
grid-auto-flow.row	57	79	52	10.1	57	52	10.3
grid-auto-rows	57	16	70	10.1	57	79	10.3
grid-column	57	16	52	10.1	57	52	10.3

Show 41 more

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
grid-column-end	57	16	52	10.1	57	52	10.3
grid-column-start	57	16	52	10.1	57	52	10.3
grid-row	57	16	52	10.1	57	52	10.3
grid-row-end	57	16	52	10.1	57	52	10.3
grid-row-start	57	16	52	10.1	57	52	10.3
grid-template	57	16	52	10.1	57	52	10.3
grid-template-areas	57	16	52	10.1	57	52	10.3
grid-template-areas.none	57	79	52	10.1	57	52	10.3
grid-template-columns	57	16	52	10.1	57	52	10.3
grid-template-columns.auto	57	79	52	10.1	57	52	10.3
grid-template-columns.fit-content	57	16	52	10.1	57	52	10.3
grid-template-columns.max-content	57	79	52	10.1	57	52	10.3
grid-template-columns.min-content	57	79	52	10.1	57	52	10.3
grid-template-columns.minmax	57	16	52	10.1	57	52	10.3
grid-template-columns.none	57	79	52	10.1	57	52	10.3
grid-template-columns.repeat	57	16	76	10.1	57	79	10.3
grid-template-rows	57	16	52	10.1	57	52	10.3
grid-template-rows.auto	57	79	52	10.1	57	52	10.3
grid-template-rows.fit-content	57	16	52	10.1	57	52	10.3
grid-template-rows.max-content	57	79	52	10.1	57	52	10.3
grid-template-rows.min-content	57	79	52	10.1	57	52	10.3
grid-template-rows.minmax	57	16	52	10.1	57	52	10.3
grid-template-rows.none	57	79	52	10.1	57	52	10.3
grid-template-rows.repeat	57	16	76	10.1	57	79	10.3
grid-template.none	57	79	52	10.1	57	52	10.3
justify-content.grid_context	57	16	52	10.1	52	52	10.3
justify-items.grid_context	57	16	45	10.1	57	45	10.3
justify-self	57	16	45	10.1	57	45	10.3
justify-self.auto	57	79	45	10.1	57	45	10.3
justify-self.grid_context	57	16	45	10.1	57	45	10.3
justify-self.left	57	79	45	10.1	57	45	10.3
justify-self.normal	57	79	45	10.1	57	45	10.3
justify-self.right	57	79	45	10.1	57	45	10.3
justify-self.stretch	57	79	45	10.1	57	45	10.3
place-content.grid_context	59	79	53	11	59	53	11
place-items.grid_context	59	79	45	11	59	45	11
place-self.grid_context	59	79	45	11	59	45	11
row-gap	47	16	52	10.1	47	52	10.3
row-gap.grid_context	66	16	61	12	66	61	12
row-gap.normal	47	16	52	10.1	47	52	10.3
<flex>	29	12	40	10.1	29	40	10.3