Gap
Defines the size of the gap between the rows and columns. It is a shorthand for column-gap and row-gap.
Classes
| Class | Properties |
|---|---|
| gap-0 | gap: 0; |
| gap-1 | gap: 0.25rem; |
| gap-2 | gap: 0.5rem; |
| gap-3 | gap: 1rem; |
| gap-4 | gap: 1.5rem; |
| gap-5 | gap: 2rem; |
| gap-6 | gap: 3rem; |
| gap-7 | gap: 4rem; |
| gap-8 | gap: 5rem; |
| row-gap-0 | row-gap: 0; |
| row-gap-1 | row-gap: 0.25rem; |
| row-gap-2 | row-gap: 0.5rem; |
| row-gap-3 | row-gap: 1rem; |
| row-gap-4 | row-gap: 1.5rem; |
| row-gap-5 | row-gap: 2rem; |
| row-gap-6 | row-gap: 3rem; |
| row-gap-7 | row-gap: 4rem; |
| row-gap-8 | row-gap: 5rem; |
| column-gap-0 | column-gap: 0; |
| column-gap-1 | column-gap: 0.25rem; |
| column-gap-2 | column-gap: 0.5rem; |
| column-gap-3 | column-gap: 1rem; |
| column-gap-4 | column-gap: 1.5rem; |
| column-gap-5 | column-gap: 2rem; |
| column-gap-6 | column-gap: 3rem; |
| column-gap-7 | column-gap: 4rem; |
| column-gap-8 | column-gap: 5rem; |
Examples
1
2
3
4
<div class="card">
<div class="flex flex-wrap justify-content-center card-container blue-container gap-3">
<div class="border-round w-12rem h-6rem bg-blue-500 text-white font-bold flex align-items-center justify-content-center">1</div>
<div class="border-round w-12rem h-6rem bg-blue-500 text-white font-bold flex align-items-center justify-content-center">2</div>
<div class="border-round w-12rem h-6rem bg-blue-500 text-white font-bold flex align-items-center justify-content-center">3</div>
<div class="border-round w-12rem h-6rem bg-blue-500 text-white font-bold flex align-items-center justify-content-center">4</div>
</div>
</div>
1
2
3
4
5
6
7
8
<div class="card">
<div class="flex flex-wrap card-container blue-container column-gap-4 row-gap-6">
<div class="border-round w-12rem h-6rem bg-blue-500 text-white font-bold flex align-items-center justify-content-center">1</div>
<div class="border-round w-12rem h-6rem bg-blue-500 text-white font-bold flex align-items-center justify-content-center">2</div>
<div class="border-round w-12rem h-6rem bg-blue-500 text-white font-bold flex align-items-center justify-content-center">3</div>
<div class="border-round w-12rem h-6rem bg-blue-500 text-white font-bold flex align-items-center justify-content-center">4</div>
<div class="border-round w-12rem h-6rem bg-blue-500 text-white font-bold flex align-items-center justify-content-center">5</div>
<div class="border-round w-12rem h-6rem bg-blue-500 text-white font-bold flex align-items-center justify-content-center">6</div>
<div class="border-round w-12rem h-6rem bg-blue-500 text-white font-bold flex align-items-center justify-content-center">7</div>
<div class="border-round w-12rem h-6rem bg-blue-500 text-white font-bold flex align-items-center justify-content-center">8</div>
</div>
</div>
Responsive
Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:gap-2 to use a responsive class.
- sm: small screens e.g. phones
- md: medium screens e.g. tablets
- lg: large screens e.g. notebooks
- xl: larger screens e.g monitors
1
2
<div class="card">
<div class="flex flex-wrap card-container blue-container gap-1 md:gap-4 xl:gap-8">
<div class="border-round w-12rem h-6rem bg-blue-500 text-white font-bold flex align-items-center justify-content-center">1</div>
<div class="border-round w-12rem h-6rem bg-blue-500 text-white font-bold flex align-items-center justify-content-center">2</div>
</div>
</div>
