Skip to content
Related Articles

Related Articles

Improve Article
How to set length to set the gap between the columns in CSS ?
  • Last Updated : 01 Apr, 2021

In this article, we will learn how to set the length that will set the gap between the 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:

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :