The grid property is shorthand for the:

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

/* three columns grid layout where the first row is 250px high */
div {
    grid: 250px / auto auto auto;
}

/* named items with a ready-to-use template */
.item_1 {
    grid-area: header;
}
.item_2 {
    grid-area: menu;
}
.item_3 {
    grid-area: main;
}
.item_4 {
    grid-area: right;
}
.item_5 {
    grid-area: footer;
}
.grid_container {
    display: grid;
    grid:
        "header header header header header"
        "menu main main main right"
        "menu footer footer footer footer";
}

Default value	none none none auto auto row
Inherited values	no
Can it be animated?	yes

These are the allowed values.

Value	Description
none	No specific sizing of the columns or rows (default)
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	Inherits this property from its parent element

The HTML element can also be styled using JavaScript and the element’s id.

document.getElementById('my_div').style.grid = '250px / auto auto auto';

<button onclick='my_function()'>Click Here</button>

<script>
function my_function() {
    document.getElementById('my_div').style.grid = '250px / auto auto auto';
}
</script>

---