Layout Display, positioning, overflow, z-index, aspect-ratio, object-fit, order, and container band utilities.
Layout utilities control display mode, positioning, overflow, stacking, and page-level container bands.
Apply .container to main, section, header, footer, or article to create a centered layout grid with gutters:
< section class = "container" > < h1 >Large band title with gutters</ h1 > < p >Body copy aligned to the container band.</ p > </ section > Band Max width Use xs--breakpoint-xs (40rem)Narrow column sm--breakpoint-sm (48rem)Forms, card layouts md (default)--breakpoint-md (64rem)Standard content width lg--breakpoint-lg (80rem)Wide sections xl--breakpoint-xl (96rem)Dashboards and galleries fullRegion width minus gutters Edge-aligned rows retaining page gutters bleed100% viewport/region width Full-bleed media and color bands
< section class = "container" data-container = "md" > < h2 >Medium width section</ h2 > < p >Children align to the md band.</ p > </ section > < section class = "container" > < h1 >Title in default band</ h1 > < figure data-container = "bleed" > < img src = "/wide.jpg" alt = "" /> </ figure > </ section > Add data-variant="article" to center content constrained by ch units:
< article class = "container" data-variant = "article" data-container = "md" > < h1 >Reading column</ h1 > < p >Constrained to 65ch line length with gutters.</ p > </ article > Value Measure xs45ch sm50ch md65ch lg (default)70ch xl75ch
Class Declaration blockdisplay: blockinline-blockdisplay: inline-blockinlinedisplay: inlineflexdisplay: flexinline-flexdisplay: inline-flexgriddisplay: gridhiddendisplay: none
Class Declaration visiblevisibility: visibleinvisiblevisibility: hidden
Preview HTML
<div class="relative w-full max-w-xl h-md bg-muted rounded-lg p-md"> <span class="absolute top-sm left-sm ui-badge" data-variant="primary">top-sm left-sm</span> <span class="absolute top-sm right-sm ui-badge" data-variant="muted">top-sm right-sm</span> <span class="absolute bottom-sm left-sm ui-badge" data-variant="muted">bottom-sm left-sm</span> <span class="absolute bottom-sm right-sm ui-badge" data-variant="primary" >bottom-sm right-sm</span > <div class="absolute inset-md flex items-center justify-center border border-dashed rounded-md text-xs text-muted-foreground font-strong" > absolute inset-md </div> </div> Class Declaration staticposition: staticrelativeposition: relativeabsoluteposition: absolutefixedposition: fixedstickyposition: sticky
Class Declaration inset-0top/right/bottom/left: 0inset-xs to inset-xlall four edges = var(--gap-{size}) top-xs to top-xltop: var(--gap-{size})right-xs to right-xlright: var(--gap-{size})bottom-xs to bottom-xlbottom: var(--gap-{size})left-xs to left-xlleft: var(--gap-{size})
< div class = "relative" > < span class = "absolute top-sm right-sm ui-badge" data-variant = "primary" >New</ span > </ div > Preview HTML
<div class="grid grid-cols-2 gap-md w-full max-w-xl"> <div class="flex flex-col gap-xs"> <div class="overflow-y-auto h-sm bg-muted rounded-md p-sm flex flex-col gap-xs"> <p class="text-sm">Scrollable region one</p> <p class="text-sm">Scrollable region two</p> <p class="text-sm">Scrollable region three</p> <p class="text-sm">Scrollable region four</p> <p class="text-sm">Scrollable region five</p> <p class="text-sm">Scrollable region six</p> </div> <span class="text-xs text-muted-foreground text-center font-strong">overflow-y-auto</span> </div> <div class="flex flex-col gap-xs"> <div class="overflow-y-auto no-scrollbar h-sm bg-muted rounded-md p-sm flex flex-col gap-xs"> <p class="text-sm">Scrollable region one</p> <p class="text-sm">Scrollable region two</p> <p class="text-sm">Scrollable region three</p> <p class="text-sm">Scrollable region four</p> <p class="text-sm">Scrollable region five</p> <p class="text-sm">Scrollable region six</p> </div> <span class="text-xs text-muted-foreground text-center font-strong" >overflow-y-auto no-scrollbar</span > </div> </div> Class Declaration overflow-visibleoverflow: visibleoverflow-hiddenoverflow: hiddenoverflow-clipoverflow: clipoverflow-autooverflow: autooverflow-x-autooverflow-x: auto; overflow-y: clipoverflow-y-autooverflow-y: auto; overflow-x: clipno-scrollbarHides scrollbar display while keeping scrollable functionality
Class Declaration z-isolateisolation: isolatez-0z-index: 0z-10, z-20, z-30, z-40, z-50z-index: 10 ... 50
Preview HTML
<div class="grid grid-cols-3 gap-md w-full max-w-xl"> <div class="aspect-square flex items-center justify-center bg-primary text-primary-foreground rounded-md p-xs text-center text-xs font-strong" > aspect-square · 1:1 </div> <div class="aspect-widescreen flex items-center justify-center bg-secondary text-secondary-foreground rounded-md p-xs text-center text-xs font-strong" > aspect-widescreen · 16:9 </div> <div class="aspect-portrait flex items-center justify-center bg-tertiary text-tertiary-foreground rounded-md p-xs text-center text-xs font-strong" > aspect-portrait · 2:3 </div> </div> Class Ratio Typical use aspect-square1 / 1Avatars, thumbnails aspect-landscape3 / 2Photography aspect-portrait2 / 3Portrait media aspect-widescreen16 / 9Video aspect-univisium2 / 1Editorial media aspect-anamorphic2.39 / 1Cinematic video
Preview HTML
<div class="grid grid-cols-3 gap-md w-full max-w-xl"> <figure class="flex flex-col gap-xs"> <img class="aspect-square w-full object-cover rounded-md bg-muted" src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=320&h=200&q=60" width="320" height="200" loading="lazy" alt="Savanna grass at dawn" /> <figcaption class="text-xs text-muted-foreground text-center font-strong"> object-cover </figcaption> </figure> <figure class="flex flex-col gap-xs"> <img class="aspect-square w-full object-contain rounded-md bg-muted" src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=320&h=200&q=60" width="320" height="200" loading="lazy" alt="Savanna grass at dawn" /> <figcaption class="text-xs text-muted-foreground text-center font-strong"> object-contain </figcaption> </figure> <figure class="flex flex-col gap-xs"> <img class="aspect-square w-full object-fill rounded-md bg-muted" src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=320&h=200&q=60" width="320" height="200" loading="lazy" alt="Savanna grass at dawn" /> <figcaption class="text-xs text-muted-foreground text-center font-strong"> object-fill </figcaption> </figure> </div> Class Declaration object-containobject-fit: containobject-coverobject-fit: coverobject-fillobject-fit: fillobject-noneobject-fit: noneobject-scale-downobject-fit: scale-down
Preview HTML
<div class="flex gap-sm w-full max-w-xl"> <div class="order-last flex-1 bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong" > 1st in markup · order-last </div> <div class="flex-1 bg-muted text-muted-foreground rounded-md p-sm text-center text-sm font-strong" > 2nd in markup </div> <div class="order-first flex-1 bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong" > 3rd in markup · order-first </div> </div> Class Declaration order-firstorder: -9999order-lastorder: 9999order-noneorder: 0