Skip to content
Related Articles

Related Articles

Improve Article
CSS | grid-column-gap Property
  • Last Updated : 07 Jan, 2019

The grid-column-gap property in CSS is used to set the size of the gap between the columns in a grid layout.

Syntax:

grid-column-gap: none|length|initial|inherit;

Property Values:

  • none: It is used to set grid-column-gap property to its default value. The default value of grid-column-gap is 0.
  • length: The size of the gap between columns is given in terms of length. The value of length can be in form pf px, em etc. The value must be non-negative.
  • initial: It is used to set grid-column-gap property to its default value.
  • inherit: This property is inherited from its parent.

Example 1:




<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS grid-column-gap Property
        </title>
          
        <style>
            .main {
                display: grid;
                grid-template-columns: auto auto auto;
                  
                /* CSS property used here */
                grid-column-gap: 20px;
                grid-row-gap: 20px;
                background-color: green;
                padding: 30px;
            }
              
            .main > div {
                background-color: white;
                text-align: center;
                padding: 15px;
                font-size: 25px;
            }
        </style>
    </head>
      
    <body>
        <div class="main">
            <div>G</div>
            <div>E</div>
            <div>E</div>
            <div>K</div>
            <div>S</div>
        </div>
    </body>
</html>                    

Output:



Example 2: This example describes default grid-column-gap property.




<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS grid-column-gap Property
        </title>
          
        <style>
            .main {
                display: grid;
                grid-template-columns: auto auto auto;
                  
                /* CSS property used here */
                grid-column-gap: initial;
                grid-row-gap: 20px;
                background-color: green;
                padding: 30px;
            }
              
            .main > div {
                background-color: white;
                text-align: center;
                padding: 15px;
                font-size: 25px;
            }
        </style>
    </head>
      
    <body>
        <div class="main">
            <div>G</div>
            <div>E</div>
            <div>E</div>
            <div>K</div>
            <div>S</div>
        </div>
    </body>
</html>                    

Output:

Supported browsers: The browser supported by CSS grid-column-gap property are listed below:

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :