Um sistema de grelha divide uma página em colunas e linhas que orientam a disposição do conteúdo. Traz ordem ao layout. O designer suíço Josef Müller-Brockmann codificou os princípios da grelha na década de 1960, e o seu livro "Grid Systems in Graphic Design" continua a ser uma referência padrão. Os jornais, revistas e sites utilizam grelhas, embora de formas diferentes.

Uma grelha típica possui colunas, espaçamento entre colunas e margens. As colunas contêm o conteúdo. O espaçamento entre colunas separa as colunas. As margens delimitam a página. Uma grelha de 12 colunas é comum na web porque divide o conteúdo igualmente em metades, terços, quartos e sextos. Os designers podem utilizar várias colunas para conteúdo mais amplo ou uma única coluna para textos mais estreitos. A grelha não dita o design. Fornece uma estrutura que o designer pode seguir, adaptar ou quebrar deliberadamente.

Componentes da grelha

• Colunas: faixas verticais para conteúdo.
• Caleiras: espaços entre colunas.
• Margens: margens externas do layout.
• Grelha de linha de base: linhas horizontais para alinhamento do texto.

Quebrar a estrutura pode ser impactante. Uma imagem em sangria total que ignore as colunas chama a atenção precisamente por violar esta estrutura. Mas a quebra só funciona se a estrutura for suficientemente forte para ser sentida.