Docs / Gap

Gap

vel-src: flexbox.css

Utilities for controlling gutters between grid and flexbox items.

ClassProperties
vel-gap-0gap: 0px
vel-gap-1gap: 0.25rem
vel-gap-2gap: 0.5rem
vel-gap-3gap: 0.75rem
vel-gap-4gap: 1rem
vel-gap-5gap: 1.25rem
vel-gap-6gap: 1.5rem
vel-gap-8gap: 2rem
vel-gap-10gap: 2.5rem
vel-gap-12gap: 3rem
vel-gap-16gap: 4rem
vel-gap-x-4column-gap: 1rem
vel-gap-y-4row-gap: 1rem

Examples

Gap sizes

vel-gap-2

A
B
C

vel-gap-8

A
B
C
example.html
<div class="vel-flex vel-flex-col vel-gap-4">
  <div>
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-gap-2</p>
    <div class="vel-flex vel-gap-2">
      <div class="vel-bg-primary vel-text-white vel-rounded-md" style="padding:10px 18px">A</div>
      <div class="vel-bg-primary vel-text-white vel-rounded-md" style="padding:10px 18px">B</div>
      <div class="vel-bg-primary vel-text-white vel-rounded-md" style="padding:10px 18px">C</div>
    </div>
  </div>
  <div>
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-gap-8</p>
    <div class="vel-flex vel-gap-8">
      <div class="vel-bg-success vel-text-white vel-rounded-md" style="padding:10px 18px">A</div>
      <div class="vel-bg-success vel-text-white vel-rounded-md" style="padding:10px 18px">B</div>
      <div class="vel-bg-success vel-text-white vel-rounded-md" style="padding:10px 18px">C</div>
    </div>
  </div>
</div>