Sizing
Set width and height with the spacing scale, percentage keywords or the predefined Size values.
Width and height
The numeric width and height helpers use the same scale as spacing. There are also a few named keywords for common cases.
| Utility | Generated CSS |
|---|---|
W(4) |
width: 1rem |
H(4) |
height: 1rem |
WFull() |
width: 100% |
WScreen() |
width: 100vw |
WAuto() |
width: auto |
HFull() |
height: 100% |
HScreen() |
height: 100vh |
<div class="@Css.W(32).H(8)"></div>
<div class="@Css.WFull().H(8)"></div>
<div class="@Css.W(16).HFull()"></div>Minimum and maximum
Min and max helpers take a Size value instead of a
number. The values cover the usual content and viewport keywords.
| Utility | Generated CSS |
|---|---|
MaxW(Size.Md) |
max-width: 48rem |
MinW(Size.Sm) |
min-width: 40rem |
MaxH(Size.Lg) |
max-height: 64rem |
MinH(Size.ScreenH) |
min-height: 100vh |
Available sizes
| Utility | Generated CSS |
|---|---|
Size.Sm |
40rem |
Size.Md |
48rem |
Size.Lg |
64rem |
Size.Xl |
80rem |
Size.Full |
100% |
Size.ScreenW |
100vw |
Size.ScreenH |
100vh |
Size.Zero |
0px |
Size.Min |
min-content |
Size.Max |
max-content |
Size.Fit |
fit-content |
max-width: 48rem
<div class="@Css.MaxW(Size.Md).P(6)">
max-width: 48rem
</div>