grid property in CSS

Example

A simple grid property example:

.grid-container {
    display: grid;
    grid: 200px / auto auto auto;
    grid-gap: 15px;
    background-color: #2196F3;
    padding: 15px;
}

Laboratory

description & Usage

The grid property is a shorthand property for:

grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow

Informations

#	Description
Default Value	none none none auto auto row
Inherited	no
Animatable	yes
Version	CSS Grid Layout Module Level 1
JavaScript syntax	object.style.grid="250px / auto auto auto"

Browser compatibility and Support

#	Chrome	Edge	Firefox	Safari	Opera
grid

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;

Values

Values	Description
none	Default
initial	Adds this value to its default property.
inherit	It inherits this value from its parent tag.

grid property CSS

Example

description & Usage

Informations

Browser compatibility and Support

Syntax

Values