Sizing

Width, height, min/max constraints, and viewport sizing utilities.

Width

Width utilities cover percentage fractions, viewport width, fixed keywords, and min/max constraints. Use fractions in grid or flex layouts to divide space explicitly.

Percentage fractions

na-width-full - 100%

na-width-3/4 - 75%

na-width-2/3 - 66.7%

na-width-1/2 - 50%

na-width-1/3 - 33.3%

na-width-1/4 - 25%

<div class="na-width-full">100%</div>
<div class="na-width-3/4">75%</div>
<div class="na-width-1/2">50%</div>
<div class="na-width-1/3">33.3%</div>
<div class="na-width-1/4">25%</div>

Special values

<div class="na-width-auto"></div>     <!-- width: auto -->
<div class="na-width-screen"></div>   <!-- width: 100vw -->

Min / max width

<div class="na-min-width-0"></div>      <!-- min-width: 0 (allows shrinking below content size) -->
<div class="na-min-width-full"></div>   <!-- min-width: 100% -->
<div class="na-max-width-full"></div>   <!-- max-width: 100% -->
<div class="na-max-width-none"></div>   <!-- max-width: none -->

Width reference

Class	Value
`na-width-0`	width: 0
`na-width-auto`	width: auto
`na-width-full`	width: 100%
`na-width-screen`	width: 100vw
`na-width-1/5, na-width-2/5, na-width-3/5, na-width-4/5`	20%, 40%, 60%, 80%
`na-width-1/4, na-width-3/4`	25%, 75%
`na-width-1/3, na-width-2/3`	33.3%, 66.7%
`na-width-1/2`	50%
`na-min-width-0`	min-width: 0
`na-min-width-full`	min-width: 100%
`na-max-width-full`	max-width: 100%
`na-max-width-none`	max-width: none

Height

Height utilities follow the same pattern. Use na-height-screen and na-min-height-screen for full-viewport layouts.

na-height-full

75%

50%

25%

na-height-auto

<div class="na-height-auto"></div>      <!-- height: auto -->
<div class="na-height-full"></div>      <!-- height: 100% (needs a parent height) -->
<div class="na-height-screen"></div>    <!-- height: 100vh -->
<div class="na-min-height-screen"></div> <!-- min-height: 100vh -->

Class	Value
`na-height-0`	height: 0
`na-height-auto`	height: auto
`na-height-full`	height: 100%
`na-height-screen`	height: 100vh
`na-min-height-0`	min-height: 0
`na-min-height-full`	min-height: 100%
`na-min-height-screen`	min-height: 100vh
`na-max-height-full`	max-height: 100%
`na-max-height-screen`	max-height: 100vh

Class

Value

na-height-0

height: 0

na-height-auto

height: auto

na-height-full

height: 100%

na-height-screen

height: 100vh

na-min-height-0

min-height: 0

na-min-height-full

min-height: 100%

na-min-height-screen

min-height: 100vh

na-max-height-full

max-height: 100%

na-max-height-screen

max-height: 100vh