CSS gridProperty


Example

Create a three-column grid layout and set the first row height to 160 pixels:

.grid-container { display: grid; grid: 160px / auto auto auto; }

Try it Yourself »

Tag definition and usage instructions

grid is a CSS shorthand property for all grid containers, which can be used to set the following properties:

  • 显formulaGridAttributes: grid-template-rows、grid-template-columns and grid-template-areas。
  • Implicit grid properties: grid-auto-rows, grid-auto-columns, and grid-auto-flow.
  • Spacing properties: grid-column-gap and grid-row-gap.
Default Value: none none none auto auto row
Inherited: no
animation: supported,View independent properties。 readinganimatable Try it Yourself
Version: CSS Grid Layout Module Level 1
JavaScript Syntax: object.style.grid="250px / auto auto auto" Try it Yourself

Browser Support

The numbers in the table indicate the first browser version number that supports the property.

Property
grid 57 16 52 10 44

Property value

Value Description
none Default value. No size is defined for rows or columns.
grid-template-rows / grid-template-columns Sets the size of columns and rows.
grid-template-areas Specifies the grid item names used by the grid layout.
grid-template-rows / grid-auto-columns Specifies the size (height) of the rows, and the automatic size of the columns.
grid-auto-rows / grid-template-columns Specifies the automatic size of rows, and sets the grid-template-columns property.
grid-template-rows / grid-auto-flow grid-auto-columns Specifies the size (height) of the rows, how the automatic layout algorithm works, and the automatic size of the columns.
grid-auto-flow grid-auto-rows / grid-template-columns Specifies how the automatic layout algorithm works, the automatic size of the rows, and sets the grid-template-columns property.
initial The property is set to its default value.Read initial
inherit Inherits this property from the parent element. Read inherit

Online Examples

Example

Set two rows, with item1 spanning the first two columns of the first two rows:

.item1 { grid-area: myArea; } .grid-container { display: grid; grid: 'myArea myArea . . .' 'myArea myArea . . .'; }

Try it Yourself »

Example

Name all items, and create a ready-to-use web template:

.item1 { grid-area: header; } .item2 { grid-area: menu; } .item3 { grid-area: main; } .item4 { grid-area: right; } .item5 { grid-area: footer; } .grid-container { display: grid; grid: 'header header header header header' 'menu main main main right right' 'menu footer footer footer footer'; }

Try it Yourself »

More content

CSS Tutorial:CSS Grid Container

CSS Reference Manual:grid-template-areasProperty

CSS Reference Manual:grid-template-rowsProperty

CSS Reference Manual:grid-template-columnsProperty

CSS Reference Manual:grid-auto-rowsProperty

CSS Reference Manual:grid-auto-columnsProperty

CSS Reference Manual:grid-auto-flowProperty

CSS Reference Manual:grid-row-gapProperty

CSS Reference Manual:grid-column-gapProperty

other extensions