Sizing Utilities

Make an element as wide or as tall as you need using width and height utilities.

Width and height utilities provide support for 25%, 50%, 75%, 100%, and auto by default.


Width Utility Example
25% Width
50% Width
75% Width
100% Width
Auto Width


Height Utility Example
25% Height
50% Height
75% Height
100% Height
Auto Height

Max Width

Max Width Utility Example
100% Max Width

Max Height

Max Height Utility Example
100% Max Height

Viewport Relative Sizing

You can also use utilities to set the width and height relative to the viewport.

<div class="_vw-100">100% Viewport Width</div>
<div class="_vh-100">100% Viewport Height</div>
<div class="_max-vw-100">100% Max Viewport Width</div>
<div class="_max-vh-100">100% Max Viewport Height</div>