CSS grid-column-end Property

The grid-column-end property in CSS defines the ending column line on which an item will be placed within a grid container.

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.

Different Examples of CSS Grid Column End Property

Example: In this example, we are using grid-column-end: auto;

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: In this example, we are using grid-column-end: span n;

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: In this example, we are using grid-column-end : column-line;

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>

Output:

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

Google Chrome 57.0 and above
Edge 16.0 and above
Mozilla Firefox 52.0 and above
Safari 10.1 and above
Opera 44.0 and above
Internet Explorer not supported

Article Tags :

CSS

Web Technologies

CSS-Properties