CSS grid-template-areas Property

The grid-template-areas CSS property specifies the area within the grid layout. Based on the sequence of values of the grid-template-areas property, the named grid area can be rendered on the screen.

Syntax

grid-template-areas: none | item-names;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .grid-container {
        display: grid;
        grid-template-areas: 'myTempArea . . .';
        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;
    }
    .box3 {
        grid-area: myTempArea;
    }
</style>
</head>
<body>

<div class="grid-container">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
    <div class="box5">5</div>
    <div class="box6">6</div>
</div>

</body>
</html>

Preview

Property Values

Value	Description
none	The default value. There are no named grid areas.
item-names	A sequence describing how each column and row should be displayed.

Supported Browsers

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

grid-template

grid-template-columns

CSS grid-template-areas Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us