A layout grid system is often designed at desktop width first: twelve columns, generous gutters, a hero across the top. Then it is squeezed onto a phone, and everything breaks.
Starting from one column turns that around. If the content works in a single readable column, every wider layout becomes an enhancement rather than a rescue.
Start with the phone#
On a 390 pixel screen, the grid is simple: one column, consistent side margins, and a vertical rhythm of spacing between blocks. Get the order of content right here and you have solved most of the hard problems.
Decide these first#
- Side margins, for example 10 or 16 pixels
- The vertical spacing scale between blocks
- The maximum width of reading text
- Which blocks can go full bleed
Add columns when content asks#
As the screen widens, some content benefits from sitting side by side: a pair of images, a list of cards, an index beside a project. Add columns only where that is true. A text column does not need to stretch to fill a wide screen.
Use asymmetry deliberately#
Symmetric grids are safe and often dull. The home page of this site uses a narrow index and a wide content column, roughly 405 to 995 at desktop width. The imbalance gives the work room and keeps navigation present without competing.
Design the column first. The grid is just columns that agree.
Keep the gaps consistent#
Choose a small set of gutters and stick to them. A two pixel hairline between images feels editorial; twenty pixels feels airy. Mixing many values makes a layout feel accidental.
Let breakpoints follow content#
Breakpoints should sit where the layout starts to fail, not at the widths of popular devices. Resize the browser slowly and add a breakpoint when something looks wrong.
