—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:
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:
But real interfaces often need:
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:
This principle keeps CSS predictable
and AI‑friendly.
Every layout system begins with
normal flow
and then modifies it:
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:
Each page extends the baseline established by Normal Flow.
Tony de Araujo —New York | Lisbon