The grid-template property is a shorthand property for the:

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

/* three columns grid layout where the first row is 250px high */
div {
    grid-template: 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
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 of the columns and rows
grid-template-areas	Specifies the grid layout using named items
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.gridTemplate = '250px / auto auto';

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

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

---