CSS grid Property
CSS grid Property
The grid property sets all of the explicit and implicit grid properties in a single declaration i.e, a shorthand property for:-
- grid-template-rows
- grid-template-areas
- grid-template-columns
- grid-auto-flow
- grid-auto-rows
- grid-auto-columns
Default Value:-
Its default value is:- none none none auto auto row
Syntax:-
Its syntax is:- 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;
Further Explanation:-
Value | Description |
---|---|
none | No specific sizing of the columns or rows |
grid-template-columns / grid-template-rows | Specifies the size of the columns and rows |
grid-template-areas | Specifies the grid layout using named items |
grid-template-rows / grid-auto-columns | Specifies the size/height of the rows, and the auto size of the columns |
grid-auto-rows / grid-template-columns | Specifies the auto size of the rows, and sets the grid-template-columns property |
grid-template-rows / grid-auto-flow grid-auto-columns | Specifies the size/height of the rows, and how to place auto-placed items, and the auto size of the columns |
grid-auto-flow grid-auto-rows / grid-template-columns | Specifies how to place auto-placed items, and the auto size of the rows, and sets the grid-template-columns property |
initial | Sets this property to its default value. |
inherit | Inherits this property from its parent element. |