CSS columngap Property (original) (raw)

CSS column-gap Property

Last Updated : 5 Jun, 2026

The column-gap property is used to control the spacing between columns in a multi-column layout.

Creates visual separation between adjacent columns.
Improves content readability by preventing columns from appearing too close together.
Allows developers to customize the spacing to match the design requirements.

**Syntax:

column-gap: length | normal | initial | inherit;

**Property Values:

**length: Sets a specific gap between columns using units such as px, em, or rem.
**normal: Default value that applies the browser's standard column spacing.
**initial: Sets the property to its default value.
**inherit: Inherits the column-gap value from the parent element.

**Example: Shows the usage of CSS column-gap property.

html `

The column-gap Property

<style>
    .gfg {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;

        -webkit-column-gap: 40px;
        -moz-column-gap: 40px;
        column-gap: 40px;
        /* Specifying Column Gap */
    }

    h1 {
        color: green;
    }

    h1,
    h2 {
        text-align: center;
    }
</style>

GeeksforGeeks

<h1>
    The column-gap Property
</h1>
<p>
    The column-gap property defines the gap
    between the columns of the element:
</p>

<!-- The text inside below div tag is divided in 
    3 columns with a gap of 40px between 
    the columns -->
<div class="gfg">
    The course is designed for students as well as
    working professionals to prepare for coding
    interviews. This course is going to have coding
    questions from school level to the level
    needed for product based companies like Amazon,
    Microsoft, Adobe, etc.
</div>