Watch
Grid systems 0:42
A 42-second explainer of Grid systems, narrated over the same demo you can try yourself.
Try the interactive Grid systems demo
What this video covers
A grid system is an invisible scaffold of columns and consistent gutters that elements align to. It turns "where should this go?" into "which columns does this span?", so a layout reads as ordered and intentional - shared edges, even rhythm - rather than a scatter of boxes each placed by eye.
Off the grid, the blocks were all slightly out - different widths, edges not quite lining up - and the page felt restless even though nothing was obviously "wrong". Snap them to shared columns and it settled at once: the alignment you could suddenly feel was the grid doing its quiet work.
