CSS - column-gap Property

Quiz

CSS column-gap property specifies the gap between adjacent columns. To use column-gap property, first you need to break the given text into multiple columns using CSS column-count property.

Syntax

The syntax for the CSS column-gap property is as follows:

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

Property Values

Value	Description
length	It sets the gap in length units.
normal	It is the default value specifying a gap of 1em between columns for multi column layout.
initial	It is used to set this property to its default value.
inherit	It is used to inherit the property of its parent element.

Examples of column-gap Property

The following examples illustrate the use of the column-gap property.

Set column-gap of a Paragraph

In this example, we have used the column-gap property to set the column gap of a paragraph in a multi-column layout.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS column-gap Property</title>
    <style>
        .heading {
            color: #04af2f;
        }
        .myClass {
            column-count: 3;
            column-gap: 30px;
        }
    </style>
</head>
<body>
    <h2 class="heading">
        CSS column-gap Property
    </h2>
    <p class="myClass">
        This CSS tutorial covers everything from basic styling 
        concepts and selectors to advanced techniques, such as 
        flexbox, grid, animations, and CSS variables. This CSS 
        tutorial is designed to help both beginners and 
        experienced designers to make them masters in creating 
        visually appealing, responsive, and modern web designs.
        CSS is the acronym for "Cascading Style Sheet". It's a 
        style sheet language used for describing the presentation 
        of a document written in a markup language like HTML. CSS 
        helps the web developers to control the layout and other 
        visual aspects of the web pages. CSS plays a crucial role 
        in modern web development by providing the tools necessary 
        to create visually appealing, accessible, and responsive 
        websites.
    </p>
</body>
</html>

Set column-gap in Flex Layout

In this example, we have used the column-gap property with flex to set the gap between columns in flex layout.

Example

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS column-gap Property
    </title>
    <style>
        .heading {
            color: #04af2f;
        }
        .container {
            border: 1px solid black;
            background-color: #f0f0ff;
            display: flex;
            flex-wrap: wrap;
            column-gap: 50px;
            padding: 10px;
        }
        .container>div {
            border: 1px solid black;
            font-family: Verdana, sans-serif;
            border-radius: 50%;
            padding: 40px;
            background-color: #031926;
            color: white;
            margin: 5px;
        }
    </style>
</head>
<body>
    <h2 class="heading">CSS column-gap Property with Flex</h2>
    <div class="container">
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
        <div>26</div>
    </div>
</body>
</html>

Set column-gap in Grid Layout

In this example, we have used the column-gap property with a grid layout to set the gap between columns in a grid layout.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .heading {
            color: #04af2f;
        }
        .container {
            border: 1px solid black;
            background-color: #f0f0ff;
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            column-gap: 50px;
            padding: 10px;

        }

        .container>div {
            border: 1px solid black;
            border-radius: 60%;
            padding: 10px;
            text-align: center;
            background-color: #031926;
            color: white;
            margin: 5px;
        }
    </style>
</head>

<body>

    <h2 class="heading">CSS column-gap Property With grid</h2>

    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
    </div>

</body>

</html>

Supported Browsers

Property
column-gap	1	12	1.5	3	11.1

Print Page