Calculadora de grid: largura da coluna e gutter
Largura de cada coluna de uma grade de layout a partir da largura total, do número de colunas, do gutter e das margens laterais, com a largura de um bloco que ocupa várias colunas.
- Roda no seu navegador
Resultado
O resultado aparece aqui.
Como se divide a largura em colunas
coluna = (largura total − 2 × margem − (colunas − 1) × gutter) ÷ colunas; bloco = colunas ocupadas × coluna + (colunas ocupadas − 1) × gutter
Numa grade de layout, a largura total se reparte entre colunas e gutters. Tirando as margens e os gutters, que são fixos, o que sobra se divide igualmente entre as colunas. Um bloco que atravessa várias colunas também leva os gutters que ficam entre elas.
Exemplo de grade de 12 colunas
| Campo | Valor |
|---|---|
| Largura total do layout (px) | 1.200 |
| Número de colunas | 12 |
| Gutter, espaço entre colunas (px) | 24 |
| Margem lateral de cada lado (px) | 0 |
| Colunas ocupadas pelo bloco | 4 |
| Largura da área das colunas (px) | 1.200 |
| Largura de cada coluna (px) | 78 |
| Largura do bloco de várias colunas (px) | 384 |
Cuidados com os espaços
- Com 12 colunas há 11 gutters, não 12: o gutter só existe entre duas colunas vizinhas.
- A largura da coluna pode sair fracionária; no CSS, grids com frações e gap resolvem isso sem arredondar na mão.
- A margem lateral entra uma vez de cada lado; para margem diferente em cada lado, use a média ou calcule a área útil à parte.
- Para converter o resultado de px para rem, use o conversor de unidades de CSS.
Nota: A conta é de largura fixa. Em layouts responsivos, refaça o cálculo para cada largura de tela que importa.
Perguntas frequentes
Como calcular a largura da coluna de um grid?
Subtraia as margens e os gutters da largura total e divida pelo número de colunas. Em 1.200 px com 12 colunas e gutter de 24 px, cada coluna tem 78 px.
Qual a largura da coluna do grid em um bloco de várias colunas?
Some as colunas ocupadas e os gutters entre elas. No primeiro cenário, 4 colunas medem 384 px.
Como funciona o gutter do grid e quantos existem?
Sempre uma unidade a menos que as colunas. No terceiro cenário, 16 colunas têm 15 gutters, e a coluna fica com 67,5 px.