Open In App

How to set length to set the gap between the columns in CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to set the length that will set the gap between the columns. A web page’s text content can be organized into many columns using CSS, which is a strong tool for web development. Long paragraphs of text can be divided into smaller, easier-to-read sections by using columns.

Approach: The column-gap property is used to specify the length that will set the gap between the columns. That takes a value to fix a specified gap between columns.

Syntax: 

column-gap: value;

Example 1:

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <style>
        .gfg {
            font-size: 30px;
            column-count: 3;
            column-gap: 50px;
        }
    </style>
</head>
 
<body>
    <div class="parent" style="width: 50%;">
        <div class="gfg">
            GeeksforGeeks is my favorite site where
            I can gain a lot of knowledge and can
            also share my knowledge what I have gained
            while learning. We can add more
            paragraphs for content. This is just an
            example to tell you how to specify
            the optimal width for the columns in CSS?
            The column width is 160px in this example.
        </div>
    </div>
</body>
 
</html>


Output:

Before apply property:

After apply property:

Example 2: Here is another example of using the column gap property.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <style>
        .gfg {
            font-size: 30px;
            column-count: 3;
            column-gap: 50px;
            column-rule: 5px dotted blue;
        }
    </style>
</head>
 
<body>
    <div class="parent" style="width: 50%;">
        <div class="gfg">
            GeeksforGeeks is my favorite site where
            I can gain a lot of knowledge and can
            also share my knowledge what I have
            gained while learning. We can add more
            paragraphs for content. This is just an
            example to tell you how to specify
            the optimal width for the columns in CSS?
            The column width is 160px in this example.
        </div>
    </div>
</body>
 
</html>


Output:

Before apply property:

After apply property:

Approach 2: Using Gap property: The gap property of CSS is used to set the spacing also caller gutter between the rows and columns.

Syntax:

gap: <row-gap> <column-gap>

Example: In this example, we are using the above-explained approach.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .gfg {
            column-count: 3;
            gap: 10px;
            column-rule: 3px dotted;
        }
    </style>
</head>
 
<body>
    <div class="parent" style="width: 50%;">
        <div class="gfg">
            GeeksforGeeks is my favorite site where
            I can gain a lot of knowledge and can
            also share my knowledge what I have
            gained while learning. We can add more
            paragraphs for content. This is just an
            example to tell you how to specify
            the optimal width for the columns in CSS?
            The column width is 160px in this example.
        </div>
    </div>
</body>
</html>


Output:

 



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