Skip to content
Related Articles

Related Articles

Improve Article

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>                     

    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 arrow_drop_up
Recommended Articles
Page :