Grid Gap

Below, utility classes to apply gap, column-gap or row-gap property.

@for $value from 0 through 16

Class	Properties
.gap-<value>	gap: #{$value * 0.25}rem;
.gap-x-<value>	column-gap: #{$value * 0.25}rem;
.gap-y-<value>	row-gap: #{$value * 0.25}rem;

Example(s)

<div class="flex-row flex-wrap gap-2">
  <div class="w-1/3 h-12 ..."></div>
  <div class="w-1/3 h-12 ..."></div>
  <div class="w-1/3 h-12 ..."></div>
  <div class="w-1/3 h-12 ..."></div>
  <div class="w-1/3 h-12 ..."></div>
  <div class="w-1/3 h-12 ..."></div>
  <div class="w-1/3 h-12 ..."></div>
  <div class="w-1/3 h-12 ..."></div>
  <div class="w-1/3 h-12 ..."></div>
</div>

<div class="flex-row gap-x-2">
  <div class="w-1/3 h-12 ..."></div>
  <div class="w-1/3 h-12 ..."></div>
  <div class="w-1/3 h-12 ..."></div>
</div>

<div class="flex-row gap-y-2">
  <div class="w-1/1 h-12 ..."></div>
  <div class="w-1/1 h-12 ..."></div>
  <div class="w-1/1 h-12 ..."></div>
</div>

Media Queries

gap, column-gap and row-gap are supported by changing state on-the-fly! You can use it like this:

<div class="gap-y-4 small:gap-x-4 small:gap-y-0 medium:gap-x-8">...</div>