Layout
Grid
Grid is a framework that divides the screen into equal columns and rows ahead of time so elements land on those cells in a predictable, orderly way.
Definition
A grid takes the empty space of your screen and divides it into equal cells ahead of time, then lets you place elements onto those cells instead of eyeballing every position. The two values that matter most are how many columns you split into and how big a gap you leave between the cells. You never draw the lines themselves, but because every element follows the same cell rules, an invisible order settles over the whole layout. It's a lot like laying graph paper under a drawing: once you've fixed the framework, you stop agonizing over where each element goes, and consistency between screens keeps itself.
Why does it matter?
Without a grid you place things by feel every time, and as pages pile up they drift slightly out of alignment until the sense of unity falls apart. Set a shared set of cell rules and your headings, body text, images, and buttons all share the same column lines, so even different screens feel like they came from one product. A grid is also the skeleton of responsive design. Decide a single rule for dropping columns as the screen narrows, and elements reflow downward on their own, giving you a layout that holds up on mobile. That's exactly why a 12-column grid became the de facto standard on the web: 12 divides cleanly by 2, 3, 4, and 6, so two-, three-, and four-column arrangements all fit inside one framework. Twelve columns can look excessive at first, but once it clicks, most screens can be explained with this single framework, which actually makes decisions simpler.
Common mistakes
- Setting up a grid and then letting a few elements ignore the cells and sit wherever you dropped them. The moment one thing breaks the rule, the grid you couldn't see starts to show, and the order you worked for ends up looking off.
- Giving each element a different gap between cells. When the gap isn't consistent, cells look like different sizes even on the same grid, leaving the impression that things are misaligned.
- Pushing your desktop column count straight onto mobile. If you don't reduce columns on a narrow screen, each cell gets far too thin, so the content gets squeezed and becomes hard to read.
Practical tips
- Decide the two values first — column count and gap — then all an individual element has to figure out is how many cells it spans. You stop rethinking position from scratch, and your work speeds up dramatically.
- Responsive design is really about deciding in advance how many columns you collapse to. One rule that folds a wide three-column layout into a single column on mobile will reflow most lists cleanly.
- A grid moves as one body with alignment and spacing. Cells give your elements a baseline to sit on, and when the gap between cells matches your spacing scale, the screen looks its most composed.
Ask your AI
In the CSS/JSX I'm pasting below, take the elements that were placed by feel with random margins, absolute positioning, and mismatched widths, and re-lay them onto a 12-column grid. Use grid-template-columns: repeat(12, 1fr) with a single consistent gap, and pick that gap as a multiple of an 8px spacing scale. Instead of rethinking each position, let every element just declare how many columns it spans (span N) so they all share the same column lines. Snap anything that was floating at an arbitrary spot to the nearest cell, and give me the updated code plus a table of each element's span.
This service is [nature of the service — e.g. a commerce app that's mostly card lists]. Design a responsive 12-column grid system for it. Since 12 divides cleanly by 2, 3, 4, and 6, propose a column arrangement (2-, 3-, or 4-up) that fits the content and explain why, then define how it collapses from N columns on desktop → tablet → a single column on mobile at each breakpoint. Keep the gap to one consistent value that lands on the spacing scale (multiples of 8px), and hand it all back as a set of grid-template-columns and gap CSS variables.
The code I'm pasting below keeps its desktop column count even on narrow screens, so the cells get far too thin and the content gets squeezed. Add responsive rules that drop columns as the screen narrows — for example, fold three columns into two on tablet and one on mobile. Keep the gap the same throughout so cells don't look like different sizes or feel misaligned. Choose between media queries and auto-fit/minmax based on what fits this layout, explain why, and give me a table of how many columns you end up with at each breakpoint.