Published Feb 27, 2022Updated May 17, 2022
Contribute to Docs

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


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.

All contributors

Looking to contribute?

Learn CSS on Codecademy