MonorailCss

Gap

Utilities for controlling gutters between grid and flexbox items.

Class CSS Output
gap-0 
gap: calc(var(--spacing) * 0);
}
gap-4 
gap: calc(var(--spacing) * 4);
}
gap-8 
gap: calc(var(--spacing) * 8);
}
gap-x-4 
column-gap: calc(var(--spacing) * 4);
}
gap-y-4 
row-gap: calc(var(--spacing) * 4);
}
gap-[2rem] 
gap: 2rem;
}

gap-0

gap: calc(var(--spacing) * 0);

gap-4

gap: calc(var(--spacing) * 4);

gap-8

gap: calc(var(--spacing) * 8);

gap-x-4

column-gap: calc(var(--spacing) * 4);

gap-y-4

row-gap: calc(var(--spacing) * 4);

gap-[2rem]

gap: 2rem;

Reference

column-gap MDN ↗
gap MDN ↗
row-gap MDN ↗

CSS Properties

  • column-gap
  • gap
  • row-gap