CSS | grid-column-end Property

Last Updated : 15 Jan, 2019

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>                     