CSS grid-column-gap Property

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>