Gap

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

Basic usage

Setting the gap between elements

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

<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.

<div class="d-flex flex-column gap-5">
  <div class="d-flex gap-3">
    <div>01</div>
    <div>02</div>
  </div>
  <div class="d-flex gap-3">
    <div>03</div>
    <div>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.

• .gap-sm-1
• .gap-sm-2
• .gap-sm-3
• .gap-sm-4
• .gap-sm-5
• .gap-sm-6
• .gap-sm-7
• .gap-md-1
• .gap-md-2
• .gap-md-3
• .gap-md-4
• .gap-md-5
• .gap-md-6
• .gap-md-7
• .gap-lg-1
• .gap-lg-2
• .gap-lg-3
• .gap-lg-4
• .gap-lg-5
• .gap-lg-6
• .gap-lg-7
• .gap-xl-1
• .gap-xl-2
• .gap-xl-3
• .gap-xl-4
• .gap-xl-5
• .gap-xl-6
• .gap-xl-7
• .gap-xxl-1
• .gap-xxl-2
• .gap-xxl-3
• .gap-xxl-4
• .gap-xxl-5
• .gap-xxl-6
• .gap-xxl-7

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

<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>