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

    
    

    Ouptut:

  • 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

    
    

    Ouptut:


  • 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

    
    

    Ouptut:

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.