Open In App

CSS grid-template-areas Property

Last Updated : 27 Aug, 2024
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

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-example2Understanding 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.

Supported Browsers: The browser supported by grid-template-areas property are listed below:

  • Google Chrome 57.0+
  • Microsoft Edge 16.0+
  • Mozilla Firefox 52.0+
  • Safari 10.1+
  • Opera 44.0+

Article Tags :

Similar Reads