Jump to main content

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.


  • .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;
Expand List

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