Width & Height
Control the width and height properties of an element.
Classes
| Class | Properties |
|---|---|
| .w-screen | width: 100vw; |
| .w-full | width: 100%; |
| .w-auto | width: auto; |
| .w-{1/2...11/12} | width: {1/2...11/12}%; |
| .w-{1-length($sizes)} | width: {$sizes[i]}; |
| .w-bp{1-length($beakpoints)} | width: {$beakpoints[i]}; |
| .h-screen | height: 100vh; |
| .h-full | height: 100%; |
| .h-auto | height: auto; |
| .h-{1/2...11/12} | height: {1/2...11/12}%; |
| .h-{1-length($sizes)} | height: {$sizes[i]}; |
Variables
| Variable | Default Value |
|---|---|
| $sizes | 0.5rem, 1rem, 1.5rem, 2rem, 3rem, 4rem, 6rem, 8rem, 16rem, 24rem, 32rem, 40rem, 48rem, 64rem, 80rem |
| $maxDenominator | $maxColumns (12) |
.w-{fraction}
Sets the width of an item to the fractional percentage.
.h-{fraction}
Sets the height of an item to the fractional percentage.
Min & Max
You can also prefix any class name with min- or
max- to achieve the same value applied for
min-{width|height} or
max-{width|height} respectively. For example:
.min-w-1/2 would render min-width: 50%;