grid
A shorthand property for setting all the explicit and implicit grid properties in a single declaration. It allows you to define rows, columns, and templates quickly.
Quick example
.container {
display: grid;
grid: 100px 1fr / 1fr 200px;
/* rows / columns */
}Quick facts
Initial value
See individual propertiesInherited
No
Applies to
grid containers
Values
grid-templategrid-template-rowsauto-flowdensegrid-auto-columnsgrid-auto-rowsgrid-template-columns grid Browser Support
Widely available Since 2017 95% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2017.
Safe to use without fallbacks.
57+
52+
10.1+
16+