DocHero
Lesson 28 +10 XP

Width & Height

Width & Height

Size elements with width and height utilities.

Width

ClassCSS
w-<n>spacing scale: w-64 = 16rem
w-1/2, w-2/3, w-3/4percentage
w-full100%
w-screen100vw
w-svw, w-lvw, w-dvwviewport units
w-autoauto
w-fit, w-min, w-maxfit-content, min-content, max-content
<div class="w-1/2">Half width</div>
<div class="w-full">Full width</div>

Max width

Control how wide an element can get:

ClassCSS
max-w-xs20rem
max-w-sm24rem
max-w-md28rem
max-w-lg32rem
max-w-xl36rem
max-w-2xl … max-w-7xl42-80rem
max-w-full100%
max-w-prose65ch

max-w-md mx-auto is the classic centered container pattern.

Min width

min-w-0, min-w-<n>, min-w-full, min-w-fit, min-w-min, min-w-max.

Height

Same pattern as width:

  • h-<n> - spacing scale.
  • h-1/2, h-2/3 - percentages.
  • h-full, h-screen, h-svh, h-dvh.
  • h-auto, h-fit, h-min, h-max.
  • min-h-, max-h- exist too.

Box size shorthand

size-<n> sets both width and height:

<img class="size-12" src="..." alt="..." />

TL;DR

  • w-64 uses the spacing scale; w-1/2 uses percentages.
  • w-full, h-screen, min-h-screen are common.
  • max-w-md mx-auto centers a container.
  • size-12 sets both dimensions.