grid

The grid property is a shorthand for setting the following properties:

Syntax

grid: <grid-template-rows> / <grid-template-columns>;

grid: <grid-template-areas>;

grid: <grid-template-rows> / <grid-auto-columns>;

grid: <grid-auto-rows> / <grid-template-columns>;

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

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

Example 1

The example below is a grid declaration for the rows and columns (separated by a /) with the following:

  • There are three rows that are each 200-pixels high.
  • There are two columns, with one being 25% of the grid’s width and another at 75%-wide.
.my-grid {
display: grid;
grid: repeat(3, 200px) / 25% 75%;
}

Example 2

.my-grid {
display: grid;
grid: auto / auto auto auto;
}

The example above defines a grid that has three columns. Each column and row is auto-sized.

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy