Calculadora de grade de layout (colunas, gutters, grade 8pt)

Informe a largura total, o número de colunas, o gutter e as margens laterais para obter a largura de uma coluna e de qualquer sequência de colunas. Útil para uma grade web de 12 colunas ou para dividir uma página impressa em milímetros.

Como usar

1. Escolha px ou mm em "Unidade" e depois uma "Largura predefinida", ou digite a "Largura total".
2. Informe "Colunas", "Gutter" e "Margem". Se as margens forem diferentes, mude "Margens laterais" para "Esquerda e direita".
3. Leia "Largura da coluna" e a tabela "Larguras combinadas" e confira no selo se está na grade escolhida em "Unidade da grade". Se estiver fora, teste a largura total sugerida na nota.
4. Ative "Comparar três breakpoints" para ver três larguras de uma vez e pressione "Copiar CSS" para levar o código.

Como funciona

• Largura da coluna = (largura total − margem esquerda − margem direita − gutter × (colunas − 1)) ÷ colunas. Largura de n colunas = largura da coluna × n + gutter × (n − 1).
• Com uma "Largura máxima do conteúdo", um total maior mantém o conteúdo nessa largura e divide o resto entre as margens.
• No modo mm a unidade da grade é em pontos: 1 pt = 0,3528 mm, e 1 mm = 3,78 px a 96 dpi.
• Os valores ficam salvos no navegador deste dispositivo.

Perguntas frequentes

Qual é a largura de uma coluna em uma grade de 1200 px com 12 colunas?

Com gutter de 24 px e sem margens, (1200 − 24 × 11) ÷ 12 = 78 px. Com gutter de 32 px, 70,67 px.

E se a largura da coluna não estiver na grade de 8 px?

A nota indica o múltiplo mais próximo e a largura total que o produz: uma coluna de 78 px vira 80 px com conteúdo de 1224 px. Uma pequena mudança no gutter ou nas margens também resolve.

Quantas colunas uma página A4 deve ter?

Não há uma resposta única. Duas ou três servem para texto; seis ou doze facilitam misturar fotos e tabelas. Informe A4 210 mm, margens de 15 mm e gutter de 4 mm para comparar.

Como uso o CSS copiado?

.container define a largura do conteúdo e o padding lateral; .grid define as colunas e o gap. Um elemento que ocupa várias colunas recebe grid-column: span 4. No modo mm o trecho também traz margens @page para impressão.