CSS grid-column-end Property

Last Updated : 27 Aug, 2024

The CSS grid-column-end property specifies the ending position of a grid item within a grid layout. The grid-column-end property defines how many columns an item will span, or on which column line the item will end, allowing precise placement within the grid structure.

Syntax

grid-column-end: auto |span n | column-line;

Property Values

Property Value	Description
auto	The grid items will span in one column. It is the default value.
span n	It is used to specify the number of column items that will span.
column-line	It is used to specify on which column to end the display of the item, the user can set the end of the column.

Example 1: Using grid-column-end: auto;

In this example, we create a CSS grid container with three columns, a green background, and evenly spaced white boxes containing numbers, centered within the grid cells using the display: grid property.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS grid container 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-column-end: auto;
        }
    </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>

Output:

Example 2: Using grid-column-end: span n;

In this example, we creates a CSS grid container with three columns. The first item spans all three columns, and the remaining items fill individual cells. The grid has a green background and white boxes.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS grid container 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-column-end: span 3;
        }
    </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>

Output:

Example 3: Using grid-column-end: column-line;

In this example, we creates a CSS grid container with three columns. The first item spans two columns, and the remaining items fill individual cells. The grid has a green background and white boxes.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS grid container 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-column-end: 3;
        }
    </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>