CSS grid Property Tutorial

In this section, we will learn what the grid property is and how to use it in CSS.

Click here to run the first example.

Click here to run the second example.

CSS grid Property Definition and Usage

The CSS `grid` property is the shorthand property and is used to set the values for these properties in a single declaration:

CSS grid Property Syntax

Here are the syntaxes of this property:

Syntax

Description

grid: grid-template-area

Using this syntax, we can set the values for `grid-template-areas` property.

grid: grid-template-rows / grid-template-columns

Using this syntax, we can set the values for `grid-template-rows` and `grid-template-columns` properties.

Note: we separate values of each property from the other using forward slash “/”

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

Using this syntax, we can set the values for `grid-template-rows` and `grid-auto-columns` properties.

Note: we separate values of each property from the other using forward slash “/”

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

Using this syntax, we can set the values for `grid-auto-rows` and `grid-template-columns` properties.

Note: we separate values of each property from the other using forward slash “/”

grid: grid-template-rows / grid-auto-flow grid-auto-columns

Using this syntax, we can set the values for `grid-template-rows` and `grid-auto-flow` and `grid-auto-columns` properties.

Note: after setting the values for “rows” we use a forward slash in order to separate those values from the auto-flow’s value and then use white space in order to separate auto-flow value from auto-columns value.

grid: grid-auto-flow grid-auto-rows / grid-template-columns

Using this syntax, we can set the values for `grid-auto-flow` and `grid-auto-rows` and `grid-template-columns` properties.

Note: we use white space in order to separate the values set for auto-flow and auto-rows and then using forward slash in order to separate the auto-rows value from template-columns value.

Notes:

  • “none” is the default value of this property and it means to set all three properties to their initial values.

Example = grid: none;

  • You can only specify the explicit or the implicit grid properties in a single `grid` declaration.

For example, you can’t set the values for `grid-template-rows` as well as `grid-auto-rows` in a single declaration. Or `grid-template-columns` as well as `grid-auto-columns` are not allowed too.

Example: grid property in CSS

See the Pen grid property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

Example: CSS grid Property

See the Pen CSS grid Property by Omid Dehghan (@enjoytutorials1) on CodePen.

Leave a Reply