Open In App
Related Articles

CSS grid-column-gap Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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: In this example, we are using the above-explained property.

html

<!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 the default grid-column-gap property. 

html

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


Last Updated : 03 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads