CSS grid property

CSS grid

CSS grid property is a shorthand property, used to set the direct and indirect properties of a grid in a single declaration.

But using CSS grid , sub properties of an grid cannot be declared.

Syntax

grid: grid-template-rows/grid-template-columns | grid-auto-columns/grid-auto-rows;

Example

Try Yourself

In the above example, we have created a div with 3 rows and 3 columns.

In order to specify the number of rows and columns, in #div1 function, we have declared grid: property.

The first 3 values ( 45px 45px 45px ), specifies that there must be 3 rows and its size is 45px.

The second 3 values ( 80px 80px 80px ), specifies that there must be 3 columns and its size is 80px.