CSS gridtemplateareas Property (original) (raw)

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 `

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

`

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

html `

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

`

**Output:

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.

**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+