Widely availableRecommended for structured layouts and responsive grids where Flexbox becomes awkward or overly manual.
Layout Widely available

Grid

CSS Grid is a two-dimensional layout system that controls rows and columns together. It shines in page shells, dashboards, and any design where both axes matter.

LayoutGrid

Overview

CSS Grid is a two-dimensional layout system that controls rows and columns together. It shines in page shells, dashboards, and any design where both axes matter.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
gap
57
16
52
10.1
57
10.3
grid context

Supported in Grid Layout
57
16
52
10.1
52
10.3
grid context

Supported in Grid Layout
57
16
52
10.1
52
10.3
grid context.start end

`start` and `end`
57
79
52
11
57
11
grid context

Supported in Grid Layout
57
16
52
10.1
52
10.3
grid context

Supported in Grid Layout
66
16
61
12
66
12
grid
57
16
52
10.1
57
10.3
inline-grid
57
16
52
10.1
57
10.3
grid context

Supported in Grid Layout
66
16
61
12
66
12
grid context.calc values

`calc()` values
66
16
52
12.1
66
12.2
grid context.percentage values

`<percentage>` values
66
16
52
11
66
11
normal
57
16
52
10.1
57
10.3
Other
css.properties.grid

The grid CSS property is a shorthand property that sets all of the explicit and implicit grid properties in a single declaration.
57
16
52
10.1
57
10.3
css.properties.grid-area

The grid-area CSS shorthand property specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid areas.
57
16
52
10.1
57
10.3
css.properties.grid-auto-columns

The grid-auto-columns CSS property specifies the size of an implicitly-created grid column grid tracks or pattern of tracks.
57
16
70
10.1
57
10.3
css.properties.grid-auto-flow

The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
57
16
52
10.1
57
10.3
CSS property
column
57
79
52
10.1
57
10.3
dense
57
79
52
10.1
57
10.3
row
57
79
52
10.1
57
10.3
Other
css.properties.grid-auto-rows

The grid-auto-rows CSS property specifies the size of an implicitly-created grid row grid tracks or pattern of tracks.
57
16
70
10.1
57
10.3
css.properties.grid-column

The grid-column CSS shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid areas.
57
16
52
10.1
57
10.3
css.properties.grid-column-end

The grid-column-end CSS property specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid areas.
57
16
52
10.1
57
10.3
css.properties.grid-column-start

The grid-column-start CSS property specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid areas.
57
16
52
10.1
57
10.3
css.properties.grid-row

The grid-row CSS shorthand property specifies a grid item's size and location within a grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid areas.
57
16
52
10.1
57
10.3
css.properties.grid-row-end

The grid-row-end CSS property specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid areas.
57
16
52
10.1
57
10.3
css.properties.grid-row-start

The grid-row-start CSS property specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid areas.
57
16
52
10.1
57
10.3
css.properties.grid-template

The grid-template CSS property is a shorthand property for defining grid column, grid_row, and grid areas.
57
16
52
10.1
57
10.3
css.properties.grid-template-areas

The grid-template-areas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.
57
16
52
10.1
57
10.3
CSS property
none
57
79
52
10.1
57
10.3
Other
css.properties.grid-template-columns

The grid-template-columns CSS property defines the line names and track sizing functions of the grid column.
57
16
52
10.1
57
10.3
CSS property
auto
57
79
52
10.1
57
10.3
fit-content

The fit-content() CSS function clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)).
57
16
52
10.1
57
10.3
max-content
57
79
52
10.1
57
10.3
min-content
57
79
52
10.1
57
10.3
minmax

The minmax() CSS function defines a size range greater than or equal to min and less than or equal to max. It is used with CSS grids.
57
16
52
10.1
57
10.3
none
57
79
52
10.1
57
10.3
repeat

The repeat() CSS function represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.
57
16
76
10.1
57
10.3
Other
css.properties.grid-template-rows

The grid-template-rows CSS property defines the line names and track sizing functions of the grid_row.
57
16
52
10.1
57
10.3
CSS property
auto
57
79
52
10.1
57
10.3
fit-content

The fit-content sizing keyword represents an element size that adapts to its content while staying within the limits of its container. The keyword ensures that the element is never smaller than its minimum intrinsic size (min-content) or larger than its maximum intrinsic size (max-content).
57
16
52
10.1
57
10.3
max-content
57
79
52
10.1
57
10.3
min-content
57
79
52
10.1
57
10.3
minmax

The minmax() CSS function defines a size range greater than or equal to min and less than or equal to max. It is used with CSS grids.
57
16
52
10.1
57
10.3
none
57
79
52
10.1
57
10.3
repeat

The repeat() CSS function represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.
57
16
76
10.1
57
10.3
none
57
79
52
10.1
57
10.3
grid context

Supported in Grid Layout
57
16
52
10.1
52
10.3
grid context

Supported in Grid Layout
57
16
45
10.1
57
10.3
Other
css.properties.justify-self

The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.
57
16
45
10.1
57
10.3
CSS property
auto
57
79
45
10.1
57
10.3
grid context

Supported in Grid Layout
57
16
45
10.1
57
10.3
left
57
79
45
10.1
57
10.3
normal
57
79
45
10.1
57
10.3
right
57
79
45
10.1
57
10.3
stretch
57
79
45
10.1
57
10.3
grid context

Supported in Grid Layout
59
79
53
11
59
11
grid context

Supported in Grid Layout
59
79
45
11
59
11
grid context

Supported in Grid Layout
59
79
45
11
59
11
Other
css.properties.row-gap

The row-gap CSS property sets the size of the gap (gutters) between an element's rows.
47
16
52
10.1
47
10.3
CSS property
grid context

Supported in Grid Layout
66
16
61
12
66
12
normal
47
16
52
10.1
47
10.3
Other
css.types.flex

The CSS data type denotes a flexible length within a grid container. It is used in grid-template-columns, grid-template-rows and other related properties.
29
12
40
10.1
29
10.3
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: grid-column-gap (57)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: grid-column-gap (16)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: grid-column-gap (52)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: grid-column-gap (10.1)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: grid-column-gap (57)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: grid-column-gap (10.3)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -ms- (12)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -ms- (12)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: grid-gap (57)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: grid-gap (16)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: grid-gap (52)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: grid-gap (10.1)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: grid-gap (57)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: grid-gap (10.3)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (79)
Implementation note
  • Previously available under a different name: -ms-grid-columns (12)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (70)
Implementation note
  • Does not accept multiple track-size values. See bug 1339672.
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (79)
Implementation note
  • Previously available under a different name: -ms-grid-rows (12)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (70)
Implementation note
  • Does not accept multiple track-size values. See bug 1339672.
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (79)
Implementation note
  • Previously available under a different name: -ms-grid-columns (12)
Notes 5 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (76)
  • This feature was removed in a later browser version (57)
Implementation note
  • `repeat(auto-fill, ...)` and `repeat(auto-fit, ...)` only support one repeated column (see bug 1341507).
  • `calc()` doesn't work in `repeat()` (see bug 1350069).
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (79)
Implementation note
  • Previously available under a different name: -ms-grid-rows (12)
Notes 5 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (76)
  • This feature was removed in a later browser version (57)
Implementation note
  • `repeat(auto-fill, ...)` and `repeat(auto-fit, ...)` only support one repeated column (see bug 1341507).
  • `calc()` doesn't work in `repeat()` (see bug 1350069).
Notes 1 item(s)
Implementation note
  • Starting with version 60, you can only specify a single value if it is valid for both `align-content` and `justify-content`.
Notes 1 item(s)
Implementation note
  • Previously available under a different name: grid-row-gap (57)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: grid-row-gap (16)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: grid-row-gap (52)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: grid-row-gap (10.1)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: grid-row-gap (57)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: grid-row-gap (10.3)

Syntax

CSS 
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-template-rows: auto;
  gap: 1.5rem;
}

.header {
  grid-column: 1 / -1;
}

Live demo

auto-fit Responsivecard

columnnumber autoadjustactual grid. with Minmax and repeat.

PreviewFullscreen

grid-template-areas pe-j

header, sidebar, main, footer visual to set onlynumberexample.

PreviewFullscreen

columnspan usinghilightplacement

heavymaincardonlywideshow, dashibo-d in usespanspecified.

PreviewFullscreen

Use cases

  • Page scaffolds

    Define headers, sidebars, content areas, and footers with clear track definitions and areas.

  • Responsive galleries

    Build image or card grids that reflow cleanly as space changes without hand-managed widths.

Cautions

  • Complex named areas improve readability at small scale, but can become verbose in very large layouts.
  • Visual rearrangement with spanning and placement does not change the reading order in the DOM.

Accessibility

  • Use Grid for layout, not for changing logical reading order. Keep focus and reading progression predictable.

Related links

Powered by web-features