CSS grid-column Property

Last Updated : 27 Aug, 2024

The CSS grid-column property specifies a grid item's size and location in a grid layout. It controls the placement and span of grid items, allowing the specification of starting and ending column lines. This enables flexible and responsive design without altering the HTML structure.

Syntax

grid-column: grid-column-start | grid-column-end;

Property Values

The grid-column-start and grid-column-end, properties can be described in three ways:

Property Value	Description
auto	The element will be placed in the default flow. It is the default value.
span n	It specifies the number of columns the item will span in grid-column-start and grid-column-end in both cases.
column-line	It describes on which column to start and display the item in case of grid-column-start and the column on which to end the display of the item for grid-column-end.

Example 1: Using grid-column: auto;

In this example, we create 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 column Property
    </title>

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

        }

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

        .Geeks1 {
            grid-column: 1 / 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: column-line;

In this example we creates a CSS grid with three columns. The first item spans the first and second columns, while the remaining items occupy individual cells. The grid has a green background.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS grid column Property
    </title>

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

        }

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

        .Geeks1 {
            grid-column: 1 / 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: span n;

In this example we creates a CSS grid with three columns. The first item spans all three columns, while the remaining items occupy individual cells. The grid has a green background.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS grid column Property
    </title>

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

        }

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

        .Geeks1 {
            grid-column: 1 / 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>