Contents
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