A grid is a structural framework of lines used to align design elements. It divides a page into columns, rows, and margins, giving the designer a system for placing content. The Swiss designer Josef Müller-Brockmann codified grid principles in the 1960s, and his book Grid Systems in Graphic Design remains a standard reference. Newspapers, magazines, and websites all rely on grids, though they use them differently.

A typical grid has columns, gutters, and margins. Columns hold content. Gutters separate columns. Margins frame the page. A 12-column grid is common on the web because it divides evenly into halves, thirds, quarters, and sixths. Designers can span multiple columns for wider content or use a single column for narrow text. The grid does not dictate the design. It provides a structure that the designer can follow, bend, or break deliberately. Breaking the grid can be powerful. A full-bleed image that ignores the columns draws attention precisely because it violates the structure.

Grid components

• Columns: vertical bands for content.
• Gutters: gaps between columns.
• Margins: outer edges of the layout.
• Baseline grid: horizontal lines for aligning text.

A grid is not a cage. It is a tool for making decisions faster and keeping a layout coherent across many pages or screens.