Capítulo 15 de 29
Layout utilities cover the CSS box model's structural properties: how an element sizes itself relative to its own content (aspect-*, box-*), how it participates in document flow (display, float, clear, columns), how it's positioned (position, top/right/bottom/left/inset, z-index), and how it handles overflow/visibility/stacking.
Aspect Ratio (aspect-ratio): aspect-<ratio> (e.g. aspect-3/2), aspect-square (1/1), aspect-video (16/9, theme-driven via --aspect-video), aspect-auto, aspect-(<custom-property>), aspect-[<value>].
Box Sizing (box-sizing): box-border (border-box — border/padding included in declared size), box-content (content-box — border/padding added on top).
Box Decoration Break (box-decoration-break, for elements split across lines/columns/pages — e.g. an inline background on wrapped text): box-decoration-slice (render as if one continuous fragment), box-decoration-clone (render each fragment independently, e.g. background repeats on each line).
Break Behavior (multi-column/print, break-after/break-before/break-inside): values auto, avoid, all (after/before only), avoid-page, page, left, right, column — e.g. break-after-column, break-before-page, break-inside-avoid-column.
Clear (clear): clear-left, clear-right, clear-both, clear-start (inline-start), clear-end (inline-end), clear-none.
Float (float): float-right, float-left, float-start (inline-start), float-end (inline-end), float-none.
Columns (columns, multi-column text layout): columns-<number> (column count), columns-3xs through columns-7xl (column width via the same --container-* scale as container queries, e.g. columns-md = 28rem), columns-auto, columns-(<custom-property>), columns-[<value>].
Display: inline, block, inline-block, flow-root, flex, inline-flex, grid, inline-grid, contents, table + full table-part family (table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row-group, table-row, inline-table), list-item, hidden (display: none). sr-only/not-sr-only apply the standard visually-hidden-but-screen-reader-accessible technique (absolutely positioned, 1×1px, clipped, no overflow) and its inverse — the accessible way to hide content visually without removing it from the accessibility tree.
Isolation: isolate (creates a new stacking context), isolation-auto.
Object Fit (object-fit, for replaced elements like img/video): object-contain, object-cover, object-fill, object-none, object-scale-down.
Object Position (object-position): 9-point grid (object-top-left, object-top, object-top-right, object-left, object-center, object-right, object-bottom-left, object-bottom, object-bottom-right), plus object-(<custom-property>)/object-[<value>].
Overflow: overflow-{auto,hidden,clip,visible,scroll} and per-axis overflow-x-*/overflow-y-* with the same value set.
Overscroll Behavior (overscroll-behavior, controls scroll-chaining to the parent/page): overscroll-{auto,contain,none} and per-axis overscroll-x-*/overscroll-y-*.
Position: static, fixed, absolute, relative, sticky.
Inset / Top / Right / Bottom / Left: a shared value grammar applies across inset-*, inset-x-*/inset-y-* (inset-inline/inset-block), inset-s-*/inset-e-* (logical start/end), inset-bs-*/inset-be-* (logical block start/end), and top-*/right-*/bottom-*/left-* individually: <number> → calc(var(--spacing) * <n>) (negatable with a leading -), <fraction> → percentage (e.g. inset-1/2 → 50%, also negatable), px → 1px, full → 100%, auto, plus (<custom-property>) and [<value>] arbitrary forms.
Visibility: visible, invisible (hidden but still occupies layout space — unlike hidden/display:none), collapse (for table rows/columns).
Z-Index: z-<number>, z-auto, z-[<value>], z-(<custom-property>).
<img class="aspect-video w-full rounded-lg object-cover" src="/video-thumb.jpg" />
<div class="relative">
<div class="absolute inset-x-0 bottom-0 z-10 bg-black/50 p-4 text-white">Caption</div>
</div>
aspect-video + object-cover for responsive media, and inset-x-0 bottom-0 for a full-width bottom-anchored overlay on a relative parent.invisible keeps layout space (use for elements that toggle visibility without reflowing siblings); hidden removes it entirely — pick based on whether surrounding layout should shift.top/right/bottom/left/inset-* family all share one value grammar (number → spacing scale, fraction → %, px, full, auto, arbitrary) — learning one teaches all of them.columns-<size> (not just columns-<number>) sets a target column width and lets the browser pick the count — often better for genuinely responsive multi-column text than a fixed number.box-decoration-clone is the fix for backgrounds/shadows looking cut off on wrapped inline text spanning multiple lines.display: flex/grid from this chapter is the entry point into that whole utility family.aspect-ratio and object-fit/object-position are usually paired with w-*/h-* utilities.