CSS column-gap (Add Space between Columns)

The CSS column-gap property is used to define the gap or space between columns, in grid layout. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div {column-count: 2; column-gap: 34px;}
   </style>
</head>
<body>

   <h2>The column-gap Property</h2>
   <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores dolorum a odio
   provident quo. Asperiores itaque commodi eum similique totam, nulla assumenda atque facere
   expedita culpa eos quod nobis eveniet recusandae nam aut consectetur enim ab quisquam possimus
   repudiandae voluptatem! Nulla, consectetur soluta praesentium quo enim tempore facere? Ducimus,
   consequuntur.</div>
   
</body>
</html>

Output

The column-gap Property

Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores dolorum a odio provident quo. Asperiores itaque commodi eum similique totam, nulla assumenda atque facere expedita culpa eos quod nobis eveniet recusandae nam aut consectetur enim ab quisquam possimus repudiandae voluptatem! Nulla, consectetur soluta praesentium quo enim tempore facere? Ducimus, consequuntur.

Note - To create a wall in between the gap, use column-rule property.

Note - The column-count divides an element into defined number of columns.

CSS column-gap Syntax

The syntax of column-gap property in CSS, is:

column-gap: x;

The value of x should be any of the following:

length - to specify the required gap. For example: 20px
normal to specify a normal gap. This is the default value
initial - to specify the gap using the default value
inherit - to specify the gap using the value inherited by its parent element

The column-gap property can be used in multiple columns model, grid layout model, or flexbox model.

CSS column-gap Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {display: grid; column-gap: 6px; background-color: chocolate;
         grid-template-columns: auto auto auto;}
      .container > div {background-color: purple; padding: 14px; text-align: center;
         color: whitesmoke;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
   </div>

</body>
</html>

Output

Note - The grid as the value of display property, is used to make an element as a block level grid container.

Note - The grid-template-columns is used to define the number of columns to create in grid layout.

Note - To define the gap between rows, use row-gap property.

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!