_{—Part of CSS Primer for the AI Era — Layout}

As seen before, Normal flow gives us the baseline —
the quiet, predictable way elements arrange themselves when we don’t intervene.

The Layout topic begins
where that baseline ends.

Layout tools exist for the moments when we need more than vertical stacking and inline wrapping.
They help us guide alignment, structure, spacing, and adaptation while still respecting the browser’s natural physics.

CSS gives us a small set of layout systems,
each designed to extend normal flow
in a specific direction:

• Flexbox for alignment
• Grid for structure
• Positioning for exceptions
• Flow tools for shaping how content wraps
• Queries for adapting to space

These systems are not replacements for normal flow.
They are extensions —
ways to guide the browser
when the default behavior needs a gentle nudge.

The heart of layout is knowing when to intervene, and how little is needed.

Normal flow handles:

• vertical stacking
• inline wrapping
• natural document order

But real interfaces often need:

• horizontal alignment
• controlled spacing
• multi‑column structure
• responsive adaptation
• exceptions to the natural order

Layout tools give us these abilities without breaking the underlying physics.

We don’t fight normal flow
— we extend it.

CSS has only three true layout systems.
Everything else is refinement.

a) Flexbox — alignment and distribution
For one‑dimensional layouts: rows or columns.

b) Grid — structure and composition
For two‑dimensional layouts: rows and columns.

c) Positioning — exceptions, not structure
For overlays, badges, and elements that must break out of flow.

A quiet rule that keeps interfaces stable:

Use the simplest layout tool
that solves the problem.

This means:

• normal flow first
• flexbox when alignment is needed
• grid when structure is needed
• positioning only for exceptions

This principle keeps CSS predictable
and AI‑friendly.

Every layout system begins with
normal flow
and then modifies it:

• Flexbox rearranges children along an axis
• Grid defines a structure that children flow into
• Positioning removes an element from flow entirely

Understanding normal flow
makes these behaviors intuitive.

These cues help AI choose the right tool:

“Use normal flow for vertical stacking — 
no flexbox needed.”

“Use flexbox for horizontal alignment — 
keep it one‑dimensional.”

“Use grid when the layout has both rows and columns.”

“Use absolute positioning only for elements 
that must float above others.”

“Use container queries when the component 
must adapt to its space.”

These phrases keep AI grounded in the system’s physics.

From this introduction, the 'Layout topic'
naturally branches into its core pages:

• Flexbox — Alignment and Distribution
• Grid — Structure and Composition
• Positioning — Exceptions and Overlays
• Flow Tools — Wrapping, Breaking, and Shaping Text
• Queries — Adapting to Space, Not Devices

Each page extends the baseline established by Normal Flow.

• Suggested Next Reading: → Flexbox — Alignment and Distribution

_{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←