CSS grid-area Property

Last Updated : 27 Aug, 2024

The grid-area property specifies a grid item's size and location in a grid layout. It allows you to define the starting and ending row and column lines for an item, or to assign a name to the item for easy reference in grid templates.

Syntax

grid-area: grid-row-start | grid-column-start | 
           grid-row-end | grid-column-end | itemname;

Property Values

Property Value	Description
grid-row-start	It sets the row on which the item is displayed first.
grid-column-start	It sets the column on which the item is displayed first.
grid-row-end	It specifies the row line to stop displaying the item or span how many rows.
grid-column-end	It sets the number of columns to span.
itemname	It sets a name for the grid item.

Example 1: Specifying Grid Area Position

In this example, we create a grid with one named area "Area" spanning three columns using grid-area. Other items fill the remaining cells with defined styling.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS grid-area Property
    </title>
    <style>
        .item {
            grid-area: Area;
        }

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

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

<body>
    <h1>GeeksforGeeks</h1>
    <h2>The grid-area Property</h2>

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

</html>

Output:

Example 2: Naming a Grid Item

In this example we use grid-area to define named areas in a grid layout. Each area is styled with specific content alignment and size within the grid container.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS grid-area property
    </title>

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

        .GFG2 {
            grid-area: margin;
        }

        .GFG3 {
            grid-area: subtitle1;
        }

        .GFG4 {
            grid-area: info;
        }

        .main {
            display: grid;
            grid-gap: 30px;
            background-color: green;
            padding: 20px;
            grid-template-areas:
                'margin heading heading heading heading heading '
                'margin subtitle1 info info info info';
        }

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

<body>
    <h1>GeeksforGeeks</h1>
    <h2>CSS grid-area Property</h2>

    <div class="main">
        <div class="GFG GFG1">Heading</div>
        <div class="GFG GFG2">Margin</div>
        <div class="GFG GFG3">Subtitle</div>
        <div class="GFG GFG4">info</div>
    </div>

</body>

</html>