Gap
The
gap property defines the size of the gap between the rows and between the columns in flexbox, grid or multi-column layout.|
Class
|
Properties
|
rem
|
px
|
|---|---|---|---|
gap-0 |
gap: 0 |
0
|
0
|
gap-1 |
gap: 1 |
-
|
1px
|
gap-2 |
gap: 2 |
0.125rem
|
2px
|
gap-4 |
gap: 4 |
0.25rem
|
4px
|
gap-6 |
gap: 6 |
0.375rem
|
6px
|
gap-8 |
gap: 8 |
0.5rem
|
8px
|
gap-10 |
gap: 10 |
0.625rem
|
10px
|
gap-16 |
gap: 16 |
1rem
|
16px
|
gap-24 |
gap: 24 |
1.5rem
|
24px
|
gap-32 |
gap: 32 |
2rem
|
32px
|
|
Column Gap
|
Properties
|
rem
|
px
|
|---|---|---|---|
gap-x-0 |
column-gap: 0 |
0
|
0
|
gap-x-1 |
column-gap: 1 |
-
|
1px
|
gap-x-2 |
column-gap: 2 |
0.125rem
|
2px
|
gap-x-4 |
column-gap: 4 |
0.25rem
|
4px
|
gap-x-6 |
column-gap: 6 |
0.375rem
|
6px
|
gap-x-8 |
column-gap: 8 |
0.5rem
|
8px
|
gap-x-10 |
column-gap: 10 |
0.625rem
|
10px
|
gap-x-16 |
column-gap: 16 |
1rem
|
16px
|
gap-x-24 |
column-gap: 24 |
1.5rem
|
24px
|
gap-x-32 |
column-gap: 32 |
2rem
|
32px
|
|
Row Gap
|
Properties
|
rem
|
px
|
|---|---|---|---|
gap-y-0 |
row-gap: 0 |
0
|
0
|
gap-y-1 |
row-gap: 1 |
-
|
1px
|
gap-y-2 |
row-gap: 2 |
0.125rem
|
2px
|
gap-y-4 |
row-gap: 4 |
0.25rem
|
4px
|
gap-y-6 |
row-gap: 6 |
0.375rem
|
6px
|
gap-y-8 |
row-gap: 8 |
0.5rem
|
8px
|
gap-y-10 |
row-gap: 10 |
0.625rem
|
10px
|
gap-y-16 |
row-gap: 16 |
1rem
|
16px
|
gap-y-24 |
row-gap: 24 |
1.5rem
|
24px
|
gap-y-32 |
row-gap: 32 |
2rem
|
32px
|
utilities.scss API