Skip to main content

Gap

Gap controls the spacing between items in a row or grid. Use it to create breathing room between cards, images, or blocks of text.

Usage​

Use numbers to control the spacing in simple steps.

  • gap-0 to gap-99

Numbers make the spacing bigger or smaller in simple steps, and they still scale with the screen.

Example​

<div class="gap-6" style="display: grid; grid-template-columns: 1fr 1fr;">
  <div>Item A</div>
  <div>Item B</div>
  <div>Item C</div>
  <div>Item D</div>
</div>

Valid values:

  • Whole numbers only (0–99). Leading zeros are OK (gap-02 is the same as gap-2).
  • Invalid examples: gap-100, gap-2.5, gap--1, gap-xx.

Note: Works for both CSS Grid and Flexbox containers (set display: grid or display: flex).