The grid property is a shorthand property for grid-template-rows
, grid-template-columns
, grid-template-areas
, grid-auto-rows, grid-auto-columns, and grid-auto-flow.
Example:
/* .container is a 3-column grid with a 200px height first row */
.container {
display: grid;
grid: 200px / auto auto auto;
}
grid-template-rows / grid-template-columns
Designates the sizes of the columns and rows.
grid-template-areas
Designates the grid layout by using named items.
grid-template-rows / grid-auto-columns
Designates the size (height) of the rows and the auto size of the columns.
grid-auto-rows / grid-template-columns
Designates the auto size of the rows and the grid-template-columns
property.
grid-template-rows / grid-auto-flow grid-auto-columns
Designates the size (height) of the rows, how to place auto-placed items, and the auto size of the columns.
grid-auto-flow grid-auto-rows / grid-template-columns
Designates how to place auto-placed items, the auto size of the rows, and the grid-template-columns
property.
initial
Sets the property to its default value.
inherit
Inherits this property’s value from its parent item.
Have a code example of grid
? Submit a codepen.io demo and we'll showcase it here ↴