Skip to content
Related Articles

Related Articles

Improve Article

CSS | grid-column-start Property

  • Difficulty Level : Medium
  • Last Updated : 30 Dec, 2020

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:




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

    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:




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

    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:




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

    Output:

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

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

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :