CSS | grid-column-start Property

The grid-column-start property defines on which column line item will start. There are different values for the grid-column-start property, with the different value user can start from anywhere. There is a specific value that is effected on the same naming block as well.

Syntax:

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

Property Values:



  • auto: A keyword specifying that the property contributes nothing to the grid item’s placement. The Default value, the item will be placed following the flow

    Syntax:

    grid-column-start: auto; 

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | grid-column-start Property
        </title>
        <style>
            .grid-container {
                display: grid;
                grid-template-columns: auto auto auto auto;
                grid-gap: 10px;
                background-color: lightgreen;
                padding: 10px;
            }
              
            .grid-container div {
                background-color: green;
                text-align: center;
                padding: 20px 0;
                font-size: 30px;
                color: white;
            }
              
            .item1 {
                <!-- grid-column-start property
                                   with auto value --> 
                grid-column-start: auto;
            }
        </style>
    </head>
      
    <body>
      
        <center>
            <h1>
             The grid-column-start Property
            </h1>
            <h3>auto value</h3>
            <strong>the item will be placed
                   following the initial flow</strong>
       </center>
      
        <div class="grid-container">
            <div class="item1">G</div>
            <div class="item2">e</div>
            <div class="item2">e</div>
            <div class="item3">k</div>
            <div class="item4">s</div>
            <div class="item5">f</div>
            <div class="item6">o</div>
            <div class="item6">r</div>
            <div class="item1">G</div>
            <div class="item2">e</div>
            <div class="item2">e</div>
            <div class="item3">k</div>
            <div class="item4">s</div>
        </div>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  • span n: A keyword Specifies the number of columns the item will span and if the name is given as a, only lines with that name are counted

    Syntax:

    grid-column-start: span n; 

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | grid-column-start Property
        </title>
        <style>
            .grid-container {
                display: grid;
                grid-template-columns: auto auto auto auto;
                grid-gap: 10px;
                background-color: lightgreen;
                padding: 10px;
            }
              
            .grid-container div {
                background-color: green;
                text-align: center;
                padding: 20px 0;
                font-size: 30px;
                color: white;
            }
              
            .item1 {
                <!-- grid-column-start property 
                                    with span value --> 
                grid-column-start: span 4;
            }
        </style>
    </head>
      
    <body>
      
         <center>
            <h1>
             The grid-column-start Property
            </h1>
            <h3>auto value</h3>
            <strong>the item will be placed following 
                               the initial flow</strong>
        </center>
        <div class="grid-container">
            <div class="item1">G</div>
            <div class="item2">e</div>
            <div class="item2">e</div>
            <div class="item3">k</div>
            <div class="item4">s</div>
            <div class="item5">f</div>
            <div class="item6">o</div>
            <div class="item6">r</div>
            <div class="item1">G</div>
            <div class="item2">e</div>
            <div class="item2">e</div>
            <div class="item3">k</div>
            <div class="item4">s</div>
        </div>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:


  • column-line: A keyword Specifies on which column to start the display of the item, user can set the starting column.

    Syntax:

    grid-column-start: column-line; 

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            CSS | grid-column-start Property
        </title>
        <style>
            .grid-container {
                display: grid;
                grid-template-columns: auto auto auto auto;
                grid-gap: 10px;
                background-color: lightgreen;
                padding: 10px;
            }
              
            .grid-container div {
                background-color: green;
                text-align: center;
                padding: 20px 0;
                font-size: 30px;
                color: white;
            }
              
            .item1 {
                <!-- grid-column-start property 
                                with column-line value --!> 
              grid-column-start: 2;
            }
                
        </style>
    </head>
      
    <body>
      
        <center>
            <h1>
             The grid-column-start Property
            </h1>
            <h3>auto value</h3>
            <strong>the item will be placed following 
                                the initial flow</strong>
        </center>
        <div class="grid-container">
            <div class="item1">G</div>
            <div class="item2">e</div>
            <div class="item2">e</div>
            <div class="item3">k</div>
            <div class="item4">s</div>
            <div class="item5">f</div>
            <div class="item6">o</div>
            <div class="item6">r</div>
            <div class="item1">G</div>
            <div class="item2">e</div>
            <div class="item2">e</div>
            <div class="item3">k</div>
            <div class="item4">s</div>
        </div>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

Supported Browser: The browser supported by grid-column-start Property are listed below:

  • Google Chrome 57.0
  • Internet Explorer 16.0
  • Mozila Firefox 52.0
  • Safari 10.0
  • Opera 44.0


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : nidhi_biet