CSS grid Property


It is a CSS property that provides a grid-based layout system with rows and columns to make designing web pages without floats and positioning easier.

Syntax

Example

Preview

Property Values

Value Description
none The default value. There is no set size for the columns or rows.
grid-template-rows / grid-template-columns The size(s) of the columns and rows are specified.
grid-template-areas The grid layout is specified using named items.
grid-template-rows / grid-auto-columns The size (height) of the rows and the auto size of the columns are specified.
grid-auto-rows / grid-template-columns Sets the grid-template-columns property and specifies the auto size of the rows.
grid-template-rows / grid-auto-flow / grid-auto-columns Specifies the size (height) of the rows, how auto-placed items should be placed, and the auto size of the columns.
grid-auto-flow / grid-auto-rows / grid-template-columns Sets the grid-template-columns property and specifies how to place auto-placed items, as well as the auto size of the rows.
initial This property is set to its default value.
inherit This property is inherited from its parent element.

Supported Browsers

Property Chrome Firefox Safari Edge / IE Opera
grid 57.0 52.0 10.0 16.0 44.0