CSS grid Property

❮ Previous Reference Next ❯

Example

.grid-container {
  display: grid;
  grid: 300px / 100px 70px auto;
}





1
2
3
4
5
6

Meaning

The grid property defines all of the explicit and implicit grid properties in a single declaration.

The following are grid shorthand properties:

Note: The sub-properties you don't specify are set to their initial value, as normal for shorthands. Also, the gutter properties are NOT reset by this shorthand.

Default value:none none none auto auto row
Inherited:No
Animatable:Yes
Version:CSS Grid Layout Module Level 1
JavaScript syntax:
object.style.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|revert|revert-layer|unset";



Standard 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|revert|revert-layer|unset;



Browser Support

The numbers in the table specify the first browser version that fully supports the property.




Status







Property Values

The following table describes the values of this property.

Value Description
none This is default value. No specific sizing of the columns or rows.
grid-template-rows / grid-template-columns Specifies the size(s) 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 If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.



Default CSS Property Values

selectors {
  grid: none none none auto auto row;
}
❮ Previous Reference Next ❯