CSS | grid-column-end Property

The grid-column-end property explains number of columns an item will span, or on which column-line the item will end. It supports three different types of values.

Syntax:

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

Property Values:

auto: The grid items will span in one columns. It is the default value.

Syntax:

grid-column-end: auto;

Example:

<!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:

span n: It is used to specify the number of column item will span.

Syntax:

grid-column-end: span n;

Example:

<!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:

column-line: It is used to specify on which column to end the display of the item, user can set the end of the column.

Syntax:

grid-column-end: column-line;

Example:

<!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
Internet Explorer 16.0
Mozilla Firefox 52.0
Safari 10.0
Opera 44.0

My Personal Notes

Recommended Posts: