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;
        }

        .Beginner1 {
            grid-column-end: auto;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="Beginner1 GFG">1</div>
        <div class="Beginner2 GFG">2</div>
        <div class="Beginner3 GFG">3</div>
        <div class="Beginner4 GFG">4</div>
        <div class="Beginner5 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;
        }

        .Beginner1 {
            grid-column-end: span 3;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="Beginner1 GFG">1</div>
        <div class="Beginner2 GFG">2</div>
        <div class="Beginner3 GFG">3</div>
        <div class="Beginner4 GFG">4</div>
        <div class="Beginner5 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;
        }

        .Beginner1 {
            grid-column-end: 3;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="Beginner1 GFG">1</div>
        <div class="Beginner2 GFG">2</div>
        <div class="Beginner3 GFG">3</div>
        <div class="Beginner4 GFG">4</div>
        <div class="Beginner5 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

Tags:

#CSS-Properties #CSS #Web Technologies

CSS grid-column Property

CSS grid-column-gap Property

CSS grid-column-end Property

Different Examples of CSS Grid Column End Property

Contact Us