Gaps
Atomic classes for managing gaps between direct children in flex and grid containers.
Classes
🔗| Class | CSS | Responsiveness |
|---|---|---|
.g0 |
gap: 0; |
Y |
.g1 |
gap: 0.25rem; /* 1 SU / 4px */ |
Y |
.g2 |
gap: 0.5rem; /* 2 SU / 8px */ |
Y |
.g3 |
gap: 0.75rem; /* 3 SU / 12px */ |
Y |
.g4 |
gap: 1rem; /* 4 SU / 16px */ |
Y |
.g5 |
gap: 1.25rem; /* 5 SU / 20px */ |
Y |
.g6 |
gap: 1.5rem; /* 6 SU / 24px */ |
Y |
.g7 |
gap: 2rem; /* 7 SU / 32px */ |
Y |
.g8 |
gap: 2.5rem; /* 8 SU / 40px */ |
Y |
.g9 |
gap: 3rem; /* 9 SU / 48px */ |
Y |
.g10 |
gap: 3.5rem; /* 10 SU / 56px */ |
Y |
.g11 |
gap: 4rem; /* 11 SU / 64px */ |
Y |
.g12 |
gap: 4.5rem; /* 12 SU / 72px */ |
Y |
.g13 |
gap: 5rem; /* 13 SU / 80px */ |
Y |
.g14 |
gap: 7.5rem; /* 14 SU / 120px */ |
Y |
.g15 |
gap: 10rem; /* 15 SU / 160px */ |
Y |
.g16 |
gap: 12.5rem; /* 16 SU / 200px */ |
Y |