Utilities - Sizing

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

25% Width
50% Width
75% Width
100% Width
Auto Width
<div class="_width:25%">25% Width</div>

<div class="_width:50%">50% Width</div>

<div class="_width:75%">75% Width</div>

<div class="_width:100%">100% Width</div>

<div class="_width:auto">Auto Width</div>

Height

25% Height
50% Height
75% Height
100% Height
Auto Height
<div class="_height:25%">25% Height</div>

<div class="_height:50%">50% Height</div>

<div class="_height:75%">75% Height</div>

<div class="_height:100%">100% Height</div>

<div class="_height:auto">Auto Height</div>

Max Width

100% Max Width
<div class="_max-width:100%">100% Max Width</div>

Max Height

100% Max Height
<div class="_max-height:100%">100% Max Height</div>

Viewport Relative Sizing

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

<div class="_width:100vw">100% Viewport Width</div>

<div class="_height:100vh">100% Viewport Height</div>

<div class="_max-width:100vw">100% Viewport Max Width</div>

<div class="_max-height:100vh">100% Viewport Max Height</div>