Style grid Property
Example
Change the grid layout of an element to a two column layout where the first row is 250px high:
document.getElementById("myDIV").style.grid = "250px / auto auto";
Try it Yourself »
Definition and Usage
The grid property is a shorthand property for:
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| grid | 57.0 | 16.0 | 52.0 | 10.0 | 44.0 |
Syntax
Return the grid property:
object.style.grid
Set the grid property:
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
Property Values
| Value | Description |
|---|---|
| none | 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. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Related Pages
CSS reference: scroll-behavior property
❮ Style Object
