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:
- grid-template-rows
- grid-template-columns
- grid-template-areas
- grid-auto-rows
- grid-auto-columns
- grid-auto-flow
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.
