CSS gridcolumngap Property (original) (raw)

CSS grid-column-gap Property

Last Updated : 27 Aug, 2024

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:

Property Value Definition
**none It is used to set the 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 the form of px, em, etc. The value must be non-negative.
**initial It is used to set the grid-column-gap property to its default value.
**inherit This property is inherited from its parent.

Different Example of CSS Grid Column Property

**Example 1: In this example, we are using the above-explained property.

html `

CSS grid-column-gap Property 
<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>
G
E
E
K
S

`

**Output:

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

html `

CSS grid-column-gap Property 
<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>
G
E
E
K
S

`

**Output:

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