When using display: grid, you can make use of gap utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a display: grid container).

Quick reference

Class	Properties
`.gap-0`	gap: 0;
`.gap-1`	gap: 0.25rem; /* 4px */
`.gap-2`	gap: 0.5rem; /* 8px */
`.gap-3`	gap: 0.75rem; /* 12px */
`.gap-4`	gap: 1rem; /* 16px */
`.gap-5`	gap: 1.25rem; /* 20px */
`.gap-6`	gap: 1.5rem; /* 24px */
`.gap-7`	gap: 1.75rem; /* 28px */
`.gap-8`	gap: 2rem; /* 32px */
`.gap-9`	gap: 2.25rem; /* 36px */
`.gap-10`	gap: 2.5rem; /* 40px */
`.gap-11`	gap: 2.75rem; /* 44px */
`.gap-12`	gap: 3rem; /* 48px */
`.gap-14`	gap: 3.5rem; /* 56px */
`.gap-16`	gap: 4rem; /* 64px */
`.gap-20`	gap: 5rem; /* 80px */
`.row-gap-0`	row-gap: 0;
`.row-gap-1`	row-gap: 0.25rem; /* 4px */
`.row-gap-2`	row-gap: 0.5rem; /* 8px */
`.row-gap-3`	row-gap: 0.75rem; /* 12px */
`.row-gap-4`	row-gap: 1rem; /* 16px */
`.row-gap-5`	row-gap: 1.25rem; /* 20px */
`.row-gap-6`	row-gap: 1.5rem; /* 24px */
`.row-gap-7`	row-gap: 1.75rem; /* 28px */
`.row-gap-8`	row-gap: 2rem; /* 32px */
`.row-gap-9`	row-gap: 2.25rem; /* 36px */
`.row-gap-10`	row-gap: 2.5rem; /* 40px */
`.row-gap-11`	row-gap: 2.75rem; /* 44px */
`.row-gap-12`	row-gap: 3rem; /* 48px */
`.row-gap-14`	row-gap: 3.5rem; /* 56px */
`.row-gap-16`	row-gap: 4rem; /* 64px */
`.row-gap-20`	row-gap: 5rem; /* 80px */
`.column-gap-0`	column-gap: 0;
`.column-gap-1`	column-gap: 0.25rem; /* 4px */
`.column-gap-2`	column-gap: 0.5rem; /* 8px */
`.column-gap-3`	column-gap: 0.75rem; /* 12px */
`.column-gap-4`	column-gap: 1rem; /* 16px */
`.column-gap-5`	column-gap: 1.25rem; /* 20px */
`.column-gap-6`	column-gap: 1.5rem; /* 24px */
`.column-gap-7`	column-gap: 1.75rem; /* 28px */
`.column-gap-8`	column-gap: 2rem; /* 32px */
`.column-gap-9`	column-gap: 2.25rem; /* 36px */
`.column-gap-10`	column-gap: 2.5rem; /* 40px */
`.column-gap-11`	column-gap: 2.75rem; /* 44px */
`.column-gap-12`	column-gap: 3rem; /* 48px */
`.column-gap-14`	column-gap: 3.5rem; /* 56px */
`.column-gap-16`	column-gap: 4rem; /* 64px */
`.column-gap-20`	column-gap: 5rem; /* 80px */

Basic usage

Setting the gap between elements

Use gap-{size} to change the gap between both rows and columns in grid and flexbox layouts.

01

02

03

04

<div class="grid gap-5">
  <div class="g-col-6">01</div>
  <div class="g-col-6">02</div>
  <div class="g-col-6">03</div>
  <div class="g-col-6">04</div>
</div>

Changing row and column gaps independently

Use the nested flex layout with gap-{size} to changing the row and column gaps.

01

02

03

04

<div class="d-flex flex-column gap-5">
  <div class="d-flex gap-3">
    <div class="flex-fill">01</div>
    <div class="flex-fill">02</div>
  </div>
  <div class="d-flex gap-3">
    <div class="flex-fill">03</div>
    <div class="flex-fill">04</div>
  </div>
</div>

Responsives

The Gap utilities are responsive by default. You can use this format gap-{breakpoint}-{size} to changing gaps on the difference device.

For example, use gap-md-3 to apply the gap-3 utility at only medium screen sizes and above.

01

02

03

04

<div class="grid gap-2 gap-md-3 gap-lg-5">
  <div class="g-col-6 ...">01</div>
  <div class="g-col-6 ...">02</div>
  <div class="g-col-6 ...">03</div>
  <div class="g-col-6 ...">04</div>
</div>

Edit this page on Github

Last updated on April 6, 2024