CSS grid-template Property

The grid-template-rows CSS property is used to specify the number of rows and row height in a grid. grid-template-row values are space-separated, with each value representing the row's height.

Syntax

grid-template: none | grid-template-rows | grid-template-columns | grid-template-areas | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .grid-container {
        display: grid;
        grid-template: 125px / auto auto auto;
        grid-gap: 12px;
        background-color: #00ab55;
        padding: 12px;
    }
    .grid-container > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 12px 0;
    }
</style>
</head>
<body>

<div class="grid-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

</body>
</html>

Preview

Property Values

Value	Description
none	The default value. There is no set size for the columns or rows.
grid-template-rows / grid-template-columns	The size(s) of the columns and rows are specified.
grid-template-areas	The grid layout is specified using named items.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
grid-template	57.0	52.0	10.0	16.0	44.0

grid-row-start

grid-template-areas

CSS grid-template Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us