03. Grid — Structure and Composition

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

Grid is the browser’s tool for structure.
Where flexbox arranges items along a single axis,
grid creates a two‑dimensional layout
— rows and columns working together.

Grid is not about alignment.
Grid is about composition.

We reach for grid when we need:

multi‑column layouts

• page‑level structure
• components with both rows and columns
• stable, repeatable patterns
• precise placement that remains responsive

Grid is the layout system for shaping space.

While Flexbox thinks in one dimension:

→ → → → →   (a line)

Grid thinks in two dimensions:

→ → → → →   (columns)
↓ ↓ ↓ ↓ ↓   (rows)

Grid creates:

• rows
• columns
• intersections
• cells
• areas

This makes grid a structural system —
a way to define the shape of a layout
before placing anything inside it.

Flexbox arranges items in a line.
Grid arranges items in a plane.

Grid is ideal for:

• page layouts
• dashboards
• multi‑column components
• card grids
• galleries
• forms with aligned labels and inputs
• anything with both rows and columns

Grid is not ideal for:

• simple horizontal alignment
• centering a single element
• small UI components
• one‑dimensional layouts

Those belong to flexbox.

Grid has a rich feature set,
but only a few properties matter for everyday use.

a) display: grid — turning on the system

.container {
  display: grid;
}

What this means:

• This element becomes a grid container.
• Its direct children become grid items and will follow grid rules instead of normal flow.

b) Defining columns and rows

grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;

What this means:

• grid-template-columns: creates three equal columns (each 1fr = one flexible fraction).
• grid-template-rows: creates two rows whose heights adjust to their content (auto).
• This defines a 3×2 grid.

c) Using fr units — the flexible fraction

grid-template-columns: 2fr 1fr;

What this means:

• Creates two columns where
• the first column gets 2 parts
• the second column gets 1 part
• The space is divided proportionally (2:1).
• The first column gets twice as much space as the second.

d) gap — spacing between rows and columns

gap: 1rem;

What this means:

• Adds uniform spacing between both rows and columns.
• This is the modern alternative to margins between grid items.

e) Placing items

.item {
  grid-column: 1 / 3;
  grid-row: 2;
}

What this means:

• grid-column: 1 / 3; → the item spans from column 1 up to (but not including) column 3, covering two columns.
• grid-row: 2; → the item sits in row 2.

The following diagram illustrates what that means:

line 1  ──────────────
Row 1
line 2  ──────────────   ← item starts here
Row 2   [   item   ]
line 3  ──────────────

This places the item precisely within the grid’s structure.

.layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1.5rem;
}

This creates:

[ 1fr ][   2fr   ][ 1fr ]

A stable, predictable structure —
no hacks, no floats, no flexbox gymnastics.

Grid does not replace normal flow —
it redefines the container’s structure.

Inside each grid cell:

• content still flows normally
• inline elements still wrap
• blocks still stack

Grid shapes the outer structure.
— Normal flow shapes the content inside it.

This is why grid feels architectural.

a) Equal‑width card grid

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

What this means:

• Creates a responsive grid where each card is at least 250px wide.
• As space grows, more columns are added automatically.
• 1fr lets each card expand to fill the row evenly.

b) Two‑column layout with sidebar

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
}

What this means:

• Creates a fixed‑width sidebar (250px) and a flexible main column (1fr).
• The gap adds space between them.

c) Center column with margins

.centered {
  display: grid;
  grid-template-columns: 1fr min(70ch, 100%) 1fr;
}

What this means:

• Creates a centered content column with comfortable line length (70ch).
• The 1fr columns on the sides act as flexible margins.

d) Named areas

grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";

What this means:

• Defines a layout using named regions.
• Each quoted line represents a row;
• Repeated a name means that area spans multiple columns.
• This makes the structure readable and easy to place items into.

In this example, repeating a name means the area stretches across two columns.
Here's a visual model:

header | header
sidebar | main
footer | footer

The repetition feel intentional, not mysterious.

Grid becomes fragile when used for:

• small components that only need alignment
• layouts that depend on content size
• dynamic lists where items should wrap naturally
• situations where document order must be preserved visually

These are signs we should switch to flexbox or normal flow.

These cues help AI choose grid only when appropriate:

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

“Use grid for structure, not alignment.”

“Use fr units for flexible, proportional columns.”

“Use auto-fill or auto-fit for responsive card grids.”

“Use named areas when the layout has a clear composition.”

“Switch to flexbox if the layout is one‑dimensional.”

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

Grid → gives us structure.
Flexbox → gives us alignment.
Normal flow → gives us the baseline.

But sometimes an element must step outside the flow entirely —
a tooltip, a badge, a floating button.

That’s where Positioning becomes the next natural tool.

Positioning is for exceptions —
the moments when an element
must break free of the layout.

• Suggested Next Reading: → Positioning: Exceptions and Overlays

—- _{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←