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.