CSS column-gap Property

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

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title>The column-gap Property</title>
<!--Driver Code Ends-->

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

<!--Driver Code Starts-->
</head>

<body>
    <h1>
        GeeksforGeeks
    </h1>

    <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>
</body>

</html>

<!--Driver Code Ends-->

Explore