Layout & grid

Grid System

Q: How do people describe a Grid System in plain words?

what designers mean by a 12-column grid Ant Design span={8} — what does that actually mean the fixed gap between those columns

Q: How do I implement a Grid System?

Set up a 12-column grid: display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; page margin 24–32px. Components declare width as column spans (grid-column: span 8). Make spans responsive: full-width on mobile, designed span from md up. Decorative elements may intentionally break the grid.

Split the page into N equal columns (usually 12) and size blocks by how many columns they span.

Also known as 12-column grid · column system · layout grid

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Grid System".

Set up a 12-column grid: display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; page margin 24–32px. Components declare width as column spans (grid-column: span 8). Make spans responsive: full-width on mobile, designed span from md up. Decorative elements may intentionally break the grid.

Anatomy:
- column: Equal-width vertical unit; 12 wins because it divides by 2/3/4/6 cleanly.
- gutter: Fixed gap between columns (Ant Design’s gutter prop).
- page margin: Space between the grid and the screen edge.
- span: How many columns a block occupies—span 8 of 12 is two-thirds wide.

Preferred API / pattern: `CSS Grid / Tailwind grid-cols-12 + col-span-*`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Faking gutters with random margins
○Avoid: Spans that add up over 12
○Avoid: Keeping 12 columns on a phone
○Avoid: Forcing every pixel into the grid

In plain wordsHow people search for it

“what designers mean by a 12-column grid”“Ant Design span={8} — what does that actually mean”“the fixed gap between those columns”

AnatomyOpen for part names

column: Equal-width vertical unit; 12 wins because it divides by 2/3/4/6 cleanly.
gutter: Fixed gap between columns (Ant Design’s gutter prop).
page margin: Space between the grid and the screen edge.
span: How many columns a block occupies—span 8 of 12 is two-thirds wide.

How to write itOpen for stack patterns

Web (HTML/CSS)grid-template-columns: repeat(12, 1fr)

React + Tailwind + shadcn/uiCSS Grid / Tailwind grid-cols-12 + col-span-*

SwiftUILazyVGrid / GridItem(.flexible()) columns

Ant Design<Row gutter={16}> / <Col span={8}>

Notes

The shared language between design and code: mark “8 columns” on the mock, write span={8} in the app. Twelve stuck because the divisors are friendly. Native CSS Grid builds it in one line; component-library Row/Col add responsive breakpoint spans. The grid is an alignment discipline, not a prison—bleed images and break decorative elements on purpose when it helps.

Common mistakesHumans and models trip here

Faking gutters with random margins: spacing drifts; use gap.
Spans that add up over 12: libraries wrap silently and leave a weird hole.
Keeping 12 columns on a phone: each column is ~20px—collapse to 4 or 1.
Forcing every pixel into the grid: use it as a baseline, not a cage.

More failure symptoms on AI broke it.

Related patterns

Responsive BreakpointsViewport-width tiers that switch layout rules—write mobile-first, enhance upward.Holy Grail LayoutHeader, footer, side rails, and a flexible main region—the classic full-page shell.CenteringPut an element in the middle of its container—still the most-asked layout question on the web.CardA contained surface grouping related content and actions as one unit.

Spotted a wrong name or missing pattern?

Message on X