CSS - grid Property

CSSgridproperty is a shorthand property used to declare all explicit and implicit grid properties in one declaration. It’s a convenient and concise way to define the grid layout of an element. Thegridproperty is a shorthand for the following individual grid-related properties:grid-template-rows,grid-template-columns,grid-template-areas,grid-auto-columns,grid-auto-flowandgrid-auto-rows

Syntax

grid: none| grid-template-rows / grid-template-columns | grid-template-areas | grid-template-rows / [grid-auto-flow] grid-auto-columns | [grid-auto-flow] grid-auto-rows / grid-template-columns | initial | inherit;

Property Values

ValueDescriptionnoneIt indicates no specific sizing of rows or columns. Default.grid-template-rows / grid-template-columnsIt specifies the number of rows with their heights and the number of columns with their width.grid-template-areasIt specifies the grid layout with names.grid-template-rows / grid-auto-columnsIt specifies the number of rows with their heights and auto size of the column.grid-auto-rows / grid-template-columnsIt specifies the auto size of rows and specifies the number of columns with their width.grid-template-rows / grid-auto-flow grid-auto-columnsIt specifies the number of rows with their height, the position of auto-placed items and the auto size of columns.grid-auto-flow grid-auto-rows / grid-template-columnsIt specifies how to place auto-placed items, the auto size of the rows, and specifies the number of columns with their width.initialIt sets the property to its initial value.inheritIt inherits the property from the parent element.

Examples of CSS Grid Property

The following examples explain thegridproperty with different values.

Grid Property with Row Height and Column Width

To define rows and columns with their sizes in a grid layout, we specify the height values for rows and width values for columns, separated by a / (e.g. 10px 10px / 20px 20px specifies 2 rows of 10px height and 2 columns of 20px width) to thegridproperty. This is shown in the following example.

Example

Grid Property with Grid Template Area

To define sizes of certain portion of the grid layout such that elements can be placed in those portions, we provide names to the portions along with their size (e.g. “header header content content ” indicates 2 rows and 2 columns) to thegridproperty. This is shown in the following example.

Example

Supported Browsers

css_reference.htm