Gaps
Gap utilities for grid and flexbox layouts.
Gap utilities for consistent spacing in grid and flexbox layouts.
Gap Classes
Add spacing between grid/flex items.
.gap-xs
0.25rem gap
View Example
html
<div class="grid gap-xs">
<div class="col-6">Item 1</div>
<div class="col-6">Item 2</div>
</div>.gap-sm
0.5rem gap
View Example
html
<div class="grid gap-sm">
<div class="col-6">Item 1</div>
<div class="col-6">Item 2</div>
</div>.gap-md
1rem gap
View Example
html
<div class="grid gap-md">
<div class="col-6">Item 1</div>
<div class="col-6">Item 2</div>
</div>.gap-lg
1.5rem gap
View Example
html
<div class="grid gap-lg">
<div class="col-6">Item 1</div>
<div class="col-6">Item 2</div>
</div>