CSS grid - gap Property

CSS gap property is a shorthand property used to define the size of the gap between rows and columns.

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

The grid grid-gap property is a shorthand for the following individual grid-related properties:

Possible Values

<length> − A specific length value such as pixels (px), centimeters (cm), inches (in), etc.
<percentage> − A percentage value of the gap between rows and columns.

Points to be remembered

This property is defined by a <row-gap> value followed by a <column-gap> value; if <column-gap> is not specified, it takes the value of <row-gap>.
<row-gap> and <column-gap> can be given as either a <length> or a <percentage>.

Applies to

Multi-column elements, flex containers, grid containers.

DOM Syntax

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

CSS gap - <length>

The following example demonstrates that gap: 30px property adds the 30px gap between columns and rows in the grid layout −

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      gap: 30px;
      color: white;
      text-align: center;
      padding: 5px;
   }
   .grid-container > div {
      background-color: red;
      padding: 5px;
   }
</style>
</head>
<body>
   <h3>The grid layout adds 30px gap between columns and rows.</h3>
   <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 gap - <percentage>

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

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      gap: 20%;
      color: white;
      text-align: center;
      padding: 5px;
   }
   .grid-container > div {
      background-color: red;
      padding: 5px;
   }
</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 gap - calc()

The following example demonstrates that gap: calc(10% + 20px) property calculated the gap between grid items is as 10% of the container's width plus an additional 20px −

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      gap: calc(10% + 20px);
      color: white;
      text-align: center;
      padding: 5px;
   }
   .grid-container > div {
      background-color: red;
      padding: 5px;
      width: 100px;
   }
</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 gap - Flex Layout

The following example demonstrates that the flex layout adds 40px gap between rows and 20px gap between columns −

<html>
<head>
<style>
   .grid-container {
      display: flex;
      flex-wrap: wrap;
      gap: 40px 20px;
      color: white;
      text-align: center;
      width: 320px;
      background-color: lightgreen;
      padding: 5px;
   }
   .grid-container > div {
      background-color: red;
      padding: 5px;
   }
</style>
</head>
<body>
   <h3>The flex layout adds 40px gap between rows and 20px gap between column.</h3>
   <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 gap - Grid Layout

The following example demonstrates that the grid layout has 30px gap between rows and 100px gap between columns −

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      gap: 30px 100px;
      color: white;
      text-align: center;
      background-color: lightgreen;
      padding: 5px;
   }
   .grid-container > div {
      background-color: red;
      padding: 5px;
   }
</style>
</head>
<body>
   <h3>The grid layout adds 30px gap between rows and 100px gap between columns</h3>
   <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>Grid item 7</div>
      <div>Grid item 8</div>
   </div>
</body>
</html>

CSS gap - Flexbox Layout

The following example demonstrates that the flexbox layout has 30px gap between rows and 80px gap between columns −

<html>
<head>
<style>
   .grid-container {
      display: flex;
      flex-wrap: wrap;
      gap: 30px 80px;
      color: white;
      text-align: center;
      background-color: lightgreen;
      padding: 5px;
   }
   .grid-container > div {
      background-color: red;
      padding: 5px;
   }
</style>
</head>
<body>
   <h3>The flexbox layout has 30px gap between rows and 80px gap between columns.</h3>
   <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>Grid item 7</div>
      <div>Grid item 8</div>
   </div>
</body>
</html>

CSS gap - Multi-column Layout

The following example demonstrates that the multi-column layout has 40px gap between columns −

<html>
<head>
<style>
   .grid-container {
      columns: 4;
      gap: 40px;
      color: red;
      text-align: center;
      background-color: lightgreen;
      padding: 5px;
   }
</style>
</head>
<body>
   <h3>The multi-column layout has 40px gap between columns.</h3>
   <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>
</body>
</html>

CSS gap - Related Properties

Following is the list of CSS properties related to gap property:

property	value
row-gap	Determines how the content of an element behaves when it is too wide to fit inside its container.
column-gap	Determines how the content of an element behaves when it is too wide to fit inside its container.