Skip to content
Related Articles

Related Articles

Improve Article

CSS | grid-column-start Property

  • Difficulty Level : Medium
  • Last Updated : 25 Aug, 2021

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;

Default Value: 

  • auto

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: 
     

html




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

html




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

html




<!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 HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :