6XC

Calculadora de Colunas de Grid

Larguras de coluna para qualquer container, número de colunas e espaçamento — com código CSS grid pronto para copiar e tamanhos de span multi-coluna.

824 visualizações

A Matemática das Colunas

Coluna = (container − (colunas−1) × espaçamento) ÷ colunas. Um container de 1200 px com 12 colunas e espaçamentos de 24 px resulta em colunas de 78 px; um elemento que ocupa 4 colunas tem 4×78 + 3×24 = 384 px. A ferramenta lista cada largura de span para que você leve medidas exatas para seus arquivos de design.

Em CSS você raramente escreve isso manualmente: display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px deixa o navegador fazer a divisão. Os valores em pixels importam para frames do Figma, exportações de imagem e para entender a que 1fr realmente se resolve nos seus breakpoints.

Perguntas Frequentes

As margens devem ser incluídas na largura do container?

Não — informe a largura do conteúdo (container menos margens/padding laterais). Um design de 1440 px com 120 px de margem de cada lado tem um container de trabalho de 1200 px.

12 colunas ou outro número?

12 é divisível por 2, 3, 4 e 6, por isso se tornou o padrão. Dashboards densos às vezes usam 24; páginas de marketing simples funcionam bem com 6 ou até 4.

Ferramentas Semelhantes

Gerador de Gradiente CSS Crie gradientes CSS lineares, radiais e cônicos com pré-visualização ao vivo e copie o código. Gerar Gerador de Sombra CSS (Box Shadow) Desenhe uma box-shadow visualmente — deslocamentos, desfoque, expansão, cor, opacidade e inset — com pré-visualização em tempo real. Gerar Gerador de Border Radius CSS Arredonde cada canto individualmente ou todos de uma vez, em px ou %, com pré-visualização ao vivo e CSS copiável. Gerar Gerador de Sombra de Texto CSS Crie um text-shadow com deslocamentos, desfoque, cor e opacidade — pré-visualização ao vivo em texto de exemplo. Gerar