Grid systems

A grid system defines the columns, gutters and margins that layouts follow. In the example, images and text line up with the shaded columns.

A shared grid makes layouts consistent across screens and saves designers from measuring every gap.

It also helps developers, because the same grid can be set up once in code and reused on every page.