Gaps
Ce contenu n’est pas encore disponible dans votre langue.
This page lists all Gaps CSS custom properties available in the OxyProps Framework
No Gap
link No GapValue | Utility Class |
---|---|
0: cancels a gap | o-nogap |
Fluid Gaps
link Fluid GapsValue | CSS Variable | Utility Class |
---|---|---|
clamp(.5rem, 1vw, 1rem) | --o-size-fluid-1 | o-gap-1 |
clamp(1rem, 2vw, 1.5rem) | --o-size-fluid-2 | o-gap-2 |
clamp(1.5rem, 3vw, 2rem) | --o-size-fluid-3 | o-gap-3 |
clamp(2rem, 4vw, 3rem) | --o-size-fluid-4 | o-gap-4 |
clamp(4rem, 5vw, 5rem) | --o-size-fluid-5 | o-gap-5 |
clamp(5rem, 7vw, 7.5rem) | --o-size-fluid-6 | o-gap-6 |
clamp(7.5rem, 10vw, 10rem) | --o-size-fluid-7 | o-gap-7 |
clamp(10rem, 20vw, 15rem) | --o-size-fluid-8 | o-gap-8 |
clamp(15rem, 30vw, 20rem) | --o-size-fluid-9 | o-gap-9 |
clamp(20rem, 40vw, 30rem) | --o-size-fluid-10 | o-gap-10 |
Fluid Gaps (Row and Column)
link Fluid Gaps (Row and Column)Value | Row Gaps | Column Gaps |
---|---|---|
clamp(.5rem, 1vw, 1rem) | o-row-gap-1 | o-col-gap-1 |
clamp(1rem, 2vw, 1.5rem) | o-row-gap-2 | o-col-gap-2 |
clamp(1.5rem, 3vw, 2rem) | o-row-gap-3 | o-col-gap-3 |
clamp(2rem, 4vw, 3rem) | o-row-gap-4 | o-col-gap-4 |
clamp(4rem, 5vw, 5rem) | o-row-gap-5 | o-col-gap-5 |
clamp(5rem, 7vw, 7.5rem) | o-row-gap-6 | o-col-gap-6 |
clamp(7.5rem, 10vw, 10rem) | o-row-gap-7 | o-col-gap-7 |
clamp(10rem, 20vw, 15rem) | o-row-gap-8 | o-col-gap-8 |
clamp(15rem, 30vw, 20rem) | o-row-gap-9 | o-col-gap-9 |
clamp(20rem, 40vw, 30rem) | o-row-gap-10 | o-col-gap-10 |
Fixed Gaps
link Fixed GapsNegative values are invalid for gap
, row-gap
, and column-gap
. This is why there are no o-gap-fixed-000
and o-gap-fixed-00
classes. If you need to use negative values, use margin classes on the children elements.
Value | CSS Variable | Utility Class |
---|---|---|
.25rem | --o-size-1 | o-gap-fixed-1 |
.5rem | --o-size-2 | o-gap-fixed-2 |
1rem | --o-size-3 | o-gap-fixed-3 |
1.25rem | --o-size-4 | o-gap-fixed-4 |
1.5rem | --o-size-5 | o-gap-fixed-5 |
1.75rem | --o-size-6 | o-gap-fixed-6 |
2rem | --o-size-7 | o-gap-fixed-7 |
3rem | --o-size-8 | o-gap-fixed-8 |
4rem | --o-size-9 | o-gap-fixed-9 |
5rem | --o-size-10 | o-gap-fixed-10 |
7.5rem | --o-size-11 | o-gap-fixed-11 |
10rem | --o-size-12 | o-gap-fixed-12 |
15rem | --o-size-13 | o-gap-fixed-13 |
20rem | --o-size-14 | o-gap-fixed-14 |
30rem | --o-size-15 | o-gap-fixed-15 |
Fixed Gaps (Row and Column)
link Fixed Gaps (Row and Column)Value | Row Gaps | Column Gaps |
---|---|---|
.25rem | o-row-gap-fixed-1 | o-col-gap-fixed-1 |
.5rem | o-row-gap-fixed-2 | o-col-gap-fixed-2 |
1rem | o-row-gap-fixed-3 | o-col-gap-fixed-3 |
1.25rem | o-row-gap-fixed-4 | o-col-gap-fixed-4 |
1.5rem | o-row-gap-fixed-5 | o-col-gap-fixed-5 |
1.75rem | o-row-gap-fixed-6 | o-col-gap-fixed-6 |
2rem | o-row-gap-fixed-7 | o-col-gap-fixed-7 |
3rem | o-row-gap-fixed-8 | o-col-gap-fixed-8 |
4rem | o-row-gap-fixed-9 | o-col-gap-fixed-9 |
5rem | o-row-gap-fixed-10 | o-col-gap-fixed-10 |
7.5rem | o-row-gap-fixed-11 | o-col-gap-fixed-11 |
10rem | o-row-gap-fixed-12 | o-col-gap-fixed-12 |
15rem | o-row-gap-fixed-13 | o-col-gap-fixed-13 |
20rem | o-row-gap-fixed-14 | o-col-gap-fixed-14 |
30rem | o-row-gap-fixed-15 | o-col-gap-fixed-15 |