Width & Height
File location: layout/helpers/_utilities.scss (GitHub)
Width Utilities
The majority of the width and max-width utilities follow the naming pattern .[max-]width-{n}pct.
Examples:
.width-33pct.max-width-90pct
The array from which you can pick a value for n is by default
[100, 90, 80, 75, 70, 66.666666, 60, 50, 40, 33.333333, 30, 25, 20, 10, 5]
You can modify the array by overriding $fractions when initializing hgrid. Read more about
how to do this (will influence any other utilities using the same values).
Note: The utility names use only integer number values. Internally, the generated CSS properties use floating point numbers,
e.g. width: 66.666666%;
Additional Width Utilities
| Utility Name | CSS Property |
|---|---|
.width-auto |
width: auto; |
.min-content |
width: min-content; |
.max-content |
width: max-content; |
.fit-content |
width: fit-content; |
.fit-content-min |
min-width: fit-content; |
.fit-content-max |
max-width: fit-content; |
.min-content-min |
min-width: min-content; |
.min-content-max |
max-width: min-content; |
.max-content-min |
min-width: max-content; |
.max-content-max |
max-width: max-content; |
Height Utilities
| Utility Name | CSS Property |
|---|---|
.height-auto |
height: auto; |
.height-100pct |
height: 100%; |
.height-100vh |
height: 100vh; |
.min-height-100 |
min-height: 100%; |
.min-height-100vh |
min-height: 100vh; |
← Previous: Embed
Next: Visibility →