A grid is a promise to your future self: every decision about position is already made. In this lesson we set up a 4-column mobile grid and a 12-column desktop grid, then lay out a real screen with them.
What you’ll practice
- Choosing columns, gutters and margins
- Snapping cards and text to the grid
- Breaking the grid on purpose, once
Tip: start with an 8px spacing unit. Most good layouts fall out of multiples of it.