CSS gridcolumnend Property (original) (raw)

CSS grid-column-end Property

Last Updated : 11 Jul, 2025

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 `

CSS grid container Property 
<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>
1
2
3
4
5

`

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

CSS grid container Property 
<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>
1
2
3
4
5

`

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

CSS grid container Property 
<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>
1
2
3
4
5

`

**Output:

**Supported Browsers: The browser supported by _grid-column-end property are listed below: