CSS grid-row-end Property

Last Updated : 27 Aug, 2024

The grid-row-end property in CSS defines the grid item's end position within a grid row by specifying the inline edge of its grid area.

Syntax

grid-row-end: value;

Default Value: auto

Property Values:

auto: The grid items span for the default value of one row.
span int: It specifies the number of rows the item will span.
integer: It specifies the row on which the item ends.
initial: It sets the grid-row-end property to its default value.
inherit: The grid-row-end property is inherited from its parent.

Note: Don't initialize the height and width of the items of the container explicitly. If initialized, the span effect can't be observed.

Example 1: This example describes the container items without the grid-row-end property.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS grid-row-end Property
    </title>

    <style>
        .main {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-gap: 20px;
            padding: 30px;
            background-color: green;

        }

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

<body>
    <div class="main">
        <div class="GFG">1</div>
        <div class="GFG">2</div>
        <div class="GFG">3</div>
        <div class="GFG">4</div>
        <div class="GFG">5</div>
    </div>
</body>

</html>

Output:

Example 2: This example describes the container items with the grid-row-end: span n property.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS grid-row-end Property
    </title>

    <style>
        .main {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-gap: 20px;
            padding: 30px;
            background-color: green;

        }

        .GFG {
            text-align: center;
            font-size: 35px;
            background-color: white;
            padding: 20px 0;
        }

        .Geeks1 {
            grid-row-end: span 2;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="Geeks1 GFG">1</div>
        <div class="Geeks2 GFG">2</div>
        <div class="Geeks3 GFG">3</div>
        <div class="Geeks4 GFG">4</div>
        <div class="Geeks5 GFG">5</div>
    </div>
</body>

</html>