How we talk about space, flow, alignment,
and structure in a way AI can follow

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

Layout is where AI misreads us most often.
Not because layout is complicated —
but because layout is implicit.

While we see:

• balance
• alignment
• rhythm
• flow
• proportion
• containment

AI sees:

• boxes
• rules
• coordinates
• constraints

So, the fourth communication skill
is simple:

We must describe layout in terms of
spatial intention,
not in terms of properties or techniques.

When we express what the space should feel like
and how it should behave,
AI can choose the right CSS without guessing.

Let's look at a few examples

When we say:

“Center this”
“Fix the spacing”
“Make this responsive”
“Align these items”

AI must decide:

• center how
• spacing relative to what
• responsive in what way
• aligned to which axis

A simple truth:

Layout is ambiguous
until we name the relationships.

So Let's name them.

Every 'layout request' falls into one
of five categories:

1. Flow
   How elements move in normal flow.
2. Alignment
   How elements relate to each other along an axis.
3. Distribution
   How space is shared between elements.
4. Containment
   How a parent shapes or limits its children.
5. Responsiveness
   How the layout adapts as space changes.

When we describe to AI
which of these we mean,
AI stops guessing.

Flow is the natural movement of elements.

Here we say:

“We want these items to stack vertically.”

“We want these items to stay in a row.”

“We want this element to stay in normal flow.”

“We want this element to break out of flow.”

We avoid saying:

“Use flexbox”

“Use grid”

“Use absolute positioning”

Those are techniques,
not intentions.

A simple principle:

Flow is the default.
We name when we want to keep it
and when we want to break it.

Alignment is the relationship between elements along an axis.

We say:

 “We want these items aligned along their 
 top edges.”

“We want these items centered horizontally.”

“We want this element aligned to the right edge of 
its container.”

“We want the text aligned with the image baseline.”

We avoid vague phrases like:

“Make this look cleaner”

“Fix the alignment”

We name the axis
and the relationship.

Distribution is how space is shared.

We say:

“We want equal spacing between these items.”

“We want the first item to take up the 
remaining space.”

“We want these items grouped tightly, 
with a gap after the group.”

“We want the spacing to follow the existing scale.”

We avoid:

“Make the spacing better”

“Spread these out”

We name the pattern.

Containment is how a parent shapes its children.

We say:

“We want this container to define the max width.”

“We want the children to wrap when space runs out.”

“We want this element to stay inside the grid area.”

“We want this section to remain visually contained.”

We avoid:

“Fix the layout”

“Make this responsive”

Containment is the architecture of the layout.
We name the boundaries.

Responsiveness is how the layout adapts.

We say:

“We want this layout to collapse into a single 
column on small screens.”

“We want this element to scale with 
the container.”

“We want this section to remain stable 
across all breakpoints.”

“We want this component to adapt without 
media queries.”

We avoid:

“Make this responsive”

“Fix the mobile layout”

We name the behavior,
not the technique.

A complete layout request looks like this:

“We want these items to stay in a row,
centered horizontally,
with equal spacing between them
using the existing spacing scale.
Do not change the HTML or reorganize the layout.”

Or:

“We want this section to remain visually contained
with a max width of 60ch.
The children should wrap when space runs out.
Keep the grid structure unchanged.”

Or:

“We want this layout to collapse into a single column 
on small screens.
Do not introduce new breakpoints.
Use the existing responsive pattern.”

This is how we describe layout without ambiguity.

When we describe layout clearly:

• AI understands the relationships
• the system stays stable
• the change stays small
• the design stays coherent
• and the collaboration stays calm

A simple closing thought:

Layout is not a technique.
It is a set of relationships.
We name the relationships,
and AI shapes the space.

• Suggested Next Reading: How to Describe Visual Intentions Clearly

_{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←