CSS grid-template-areas Property

Last Updated : 27 Aug, 2024

The grid-template-areas property in CSS allows you to define named grid areas within a grid layout. This property specifies how grid items are placed into areas using a named grid template. Let's explore its syntax, values, examples, and browser support.

Syntax

grid-template-areas: none | 'name1 name2 ...' | 'name3 name4 ...';

none: Default value indicating no named grid areas.
'name1 name2 ...': Defines named grid areas where each area name is placed within single quotes ' '.

Property Value

none: This value signifies that the grid container does not have any named grid areas defined.
'name1 name2 ...': Specifies named grid areas where each name represents a grid area. Names are separated by spaces, and each row of area names is enclosed in single quotes.

Example 1: This example displays the grid-template-areas property.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS grid-template-areas Property
    </title>

    <style>
        .GFG1 {
            grid-area: area;
        }

        .geeks {
            background-color: green;
            padding: 30px;
            display: grid;
            grid-template-areas: 'area area';
            grid-gap: 20px;
        }

        .GFG {
            background-color: white;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="geeks">
        <div class="GFG GFG1">A</div>
        <div class="GFG">B</div>
        <div class="GFG">C</div>
        <div class="GFG">D</div>
        <div class="GFG">E</div>
        <div class="GFG">F</div>
        <div class="GFG">G</div>
        <div class="GFG">H</div>
    </div>
</body>

</html>

Output: CSS grid-template-areas-example1 Example 2: This example displays the grid-template-areas property.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS grid-template-areas Property
    </title>

    <style>
        .GFG1 {
            grid-area: area;
        }

        .geeks {
            background-color: green;
            padding: 30px;
            display: grid;
            grid-template-areas:
                'area area . . .'
                'area area . . .';
            grid-gap: 20px;
        }

        .GFG {
            background-color: white;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="geeks">
        <div class="GFG GFG1">A</div>
        <div class="GFG">B</div>
        <div class="GFG">C</div>
        <div class="GFG">D</div>
        <div class="GFG">E</div>
        <div class="GFG">F</div>
        <div class="GFG">G</div>
    </div>
</body>

</html>

Output:

CSS grid-template-areas-example2 Understanding how to utilize the grid-template-areas property effectively can enhance the organization and structure of your CSS grid layouts, improving readability and maintainability of your code.