CSS grid - column-gap Property

CSS column-gap property defines the size of the gap between columns.

The column-gap property, which was originally part of Multi-column Layout, is now part of Box Alignment and can be used in Multi-column, Flexible Box, and Grid layouts.

To ensure compatibility with legacy websites, the gap property in CSS Grid was initially named grid-column-gap, and browsers will still accept grid-column-gap as an alias for column-gap.

Possible Values

  • normal − In browsers, the default column spacing is 1em for multi-column layouts and 0 for other layout types.

  • <length> − The length represents the size of the gap between columns in pixels (px), centimeters (cm), inches (in), etc. This value cannot be negative.

  • <percentage> − A percentage (%) value represents the size of the gap between columns. This value cannot be negative.

Applies to

Multi-column elements, flex containers, grid containers.

DOM Syntax

object.style.columnGap = "<length>|<percentage>";

CSS column-gap - <length>

The following example demonstrates that column-gap: 40px property adds the 40px gap between columns in the grid layout −

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      column-gap: 40px;
      color: white;
      text-align: center;
   }
   .grid-container > div {
      background-color: red;
      border: 2px solid blue;
      padding: 10px;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid item 1</div>
      <div>Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
      <div>Grid item 5</div>
      <div>Grid item 6</div>
   </div>
</body>
</html>

CSS column-gap - <percentage>

The following example demonstrates that column-gap: 20% property adds the 20% gap between columns in the grid layout −

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      column-gap: 20%;
      color: white;
      text-align: center;
   }
   .grid-container > div {
      background-color: red;
      border: 2px solid blue;
      padding: 10px;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid item 1</div>
      <div>Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
      <div>Grid item 5</div>
      <div>Grid item 6</div>
   </div>
</body>
</html>

CSS column-gap - Flex Layout

The following example demonstrates how to use column-gap property is used to add a column gap between adjacent flex items.

  • The display: flex and flex-flow: row wrap property is used to create a flex container. It arranges flex items in a row. If the items do not fit within the container's width, they will move to the next row.

  • The nth-of-type(3n) selector targets every third flex items.

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-flow: row wrap;
      column-gap: 40px;
   }
   .flex-container > div {
      border: 2px solid red;
      background-color: pink;
      flex: 100px;
      padding: 5px;
   }
   div:nth-of-type(3n) {
      flex: 250px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Grid Item 1</div>
      <div>Grid Item 2</div>
      <div>Grid Item 3</div>
      <div>Grid Item 4</div>
      <div>Grid Item 5</div>
      <div>Grid Item 6</div>
   </div>
</body>
</html>
Flex items in a flex container are arranged horizontally in each row; however, by default, there is no vertical space between rows. To add vertical space, use the non-zero value for grid-row-gap or the gap shorthand to set both grid-row-gap and column-gap spacing.

CSS column-gap - Grid Layout

The following example demonstrates that the column-gap: 20px property adds 20px horizontal space between the grid items −

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 100px);
      column-gap: 20px;
   }
   .grid-container > div {
      padding: 10px; 
      border: 1px solid red;
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid Item 1</div>
      <div>Grid Item 2</div>
      <div>Grid Item 3</div>
   </div>
</body>
</html>

CSS column-gap - Mutli-column Layout

The following example demonstrates that the multi-colum layout where column-count: 3; property creates 3 column layout and column-gap: 60px adds 60px horizontal space between the columns −

<html>
<head>
<style>
   .grid-container {
      color: red;
      background-color: lightgreen;
      padding: 5px;
      column-count: 3;
      column-gap: 60px;
   }
</style>
</head>
<body>
   <div class="grid-container">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>
Advertisements