Layout - defuss-shadcn

On this page (9)

§A small surface over native layout

Use short, familiar classes for common operations; keep configuration properties descriptive. flex selects Flexbox and grid selects Grid. Neither silently chooses a gap, wrapping or columns. More opinionated composition is explicit.

Class	Contract
`flex` / `inline-flex`	Flex formatting context; native row and nowrap defaults.
`grid` / `inline-grid`	Grid formatting context; no prescribed tracks.
`stack`	Flex column; default gap of four density-adjusted base units.
`container`	Centered border-box container; 80rem maximum; inline gutters.
`center`	Grid with centered items; no implicit viewport height.
`query`	Named `layout` inline-size query boundary.

A stack of a flex row and an intrinsic grid - switch the card to Phone or Tablet to watch both halves re-flow.

§Let available space do the work

Use wrapping Flexbox for one-dimensional content and an intrinsic Grid for equal-width cards - the two halves of the composition demo above, which reacts when you resize it with the width toolbar. A grid can adapt inside a sidebar, dialog or full page without viewport breakpoints. Use container queries only when the structure must change.

<!-- One-dimensional content: wrap with the available width. -->

<div class="flex flex-wrap items-center justify-between gap-3">…</div>

<!-- Equal-width cards: intrinsic auto-fit grid, no breakpoints. -->

<div class="grid grid-cols-auto gap-4" style="--layout-min:12rem;">…</div>

§Handle overflow deliberately

Every constrained container eventually overflows; the question is only which policy you choose. The overflow family covers the box axes, truncate bundles the classic single-line ellipsis recipe, and the break/wrap family decides what happens to words that don't fit - wrap-anywhere is the flex min-w-0 companion that lets a long identifier wrap inside a shrinkable track.

Class	Contract
`overflow-auto` / `-x-auto` / `-y-auto`	Scroll the box on the chosen axes.
`overflow-hidden` / `-x-hidden` / `-y-hidden`	Clip at the padding edge, no scrolling.
`overflow-clip` / `overflow-visible`	Hard clip (no scrollable overflow area at all) / the native default.
`truncate`	`overflow-hidden` + `text-overflow:ellipsis` + `nowrap` in one class.
`text-ellipsis` / `text-clip`	How an overflowing inline box ends - needs an overflow context.
`break-words` / `break-all` / `break-normal`	Word-breaking policy: break on demand, break anywhere per character, native.
`wrap-anywhere`	`overflow-wrap:anywhere` - also shrinks min-content, the partner of `min-w-0`.

Three overflow policies at work - shrink the canvas (Phone) and watch each box react on its own axis.

§Guides

Each primitive has its own page with rendered demos and the full class reference:

Container

Centered, bounded content with logical gutters - and named containment when you need it.

Flex

Direction, wrapping, alignment and flexible sizing using native Flexbox.

Grid

Intrinsic card grids, explicit tracks and aligned subgrids - responsive without breakpoints.

Overflow

Box clipping/scrolling and text-flow policies for constrained containers - the overflow, truncate and wrap families.

§Each primitive owns its parameters

Property	Owner / default
`--layout-gap`	Flex/grid/stack/center instance; resets at each nested root.
`--layout-min`	Grid instance; 16rem preferred auto-fit track minimum.
`--layout-max`	Container instance; 80rem outer maximum.
`--layout-gutter`	Container instance; four density-adjusted base units.

An outer grid’s track minimum must not accidentally configure an inner grid. Defaults are declared on each owning root; override that root with inline properties or unlayered application CSS. An explicit helper such as gap-2 takes precedence over a primitive’s default gap.

.project-grid { --layout-min: 18rem; --layout-gap: 1.25rem; }

.reading-area { --layout-max: 70ch; --layout-gutter: clamp(1rem, 3vw, 2rem); }

§Familiar names, not a Tailwind compiler

Numeric sizing, spacing, alignment, flex and fixed-grid names follow familiar Tailwind conventions at the default scale. stack, center, query, grid-cols-auto and the centered/guttered container are deliberate extensions. There are no arbitrary-value brackets, generated breakpoint prefixes, class scanning or runtime layout scripts. Use ordinary CSS for exceptional layouts.

Generic names can collide with other utility libraries. This module is optional; layers control precedence, not selector isolation. Documentation previews use separate documents so the legacy, unlayered docs utilities cannot mask the public CSS.

§Keep semantics and reading order

CSS Grid does not imply an ARIA grid widget. Preserve meaningful DOM order; no dense placement or visual-reordering helpers are shipped. Display helpers leave native hidden elements, until-found content, closed dialogs and closed popovers under native control. Long content still needs an explicit wrapping or scrolling policy; the module does not hide overflow.

§Load the optional modules

<link rel="stylesheet" href="../theme/utils/default-semantic-tokens.css">

<link rel="stylesheet" href="../theme/utils/sizing.css">

<link rel="stylesheet" href="../theme/utils/layout.css">

<link rel="stylesheet" href="../theme/utils/accessibility.css">

<!-- Load the component stylesheets you actually use next. -->

<link rel="stylesheet" href="../components/button/button.css">

§Platform references

CSS Grid and subgrid · CSS Flexible Box Layout · CSS container queries · HTML hidden states

Comments, ideas or improvements? Edit this page's source on GitHub