Gerador de Colunas CSS
Gere layouts de múltiplas colunas em CSS — quantidade de colunas, largura, espaçamento e linha divisória — com pré-visualização ao vivo estilo jornal, e depois copie o CSS e o HTML.
Entrada
0 = automático. Com a largura definida, o navegador pode usar menos colunas do que a quantidade definida quando o espaço for limitado.
Saída
Seu layout de colunas aparecerá aqui.
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-columns-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-columns-generator` tool (CSS Columns Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-columns-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Colunas CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O layout de múltiplas colunas em CSS distribui um mesmo bloco de conteúdo em várias colunas, como um jornal, sem marcação extra. Este gerador permite definir a quantidade de colunas, a largura preferida, o espaçamento e a linha divisória, mostra uma pré-visualização ao vivo e fornece o CSS para copiar.
Como usar
- Defina a quantidade de colunas (1–6), ou adicione uma largura de coluna para que o navegador escolha quantas colunas cabem.
- Ajuste o espaçamento entre as colunas.
- Escolha a linha divisória: estilo, espessura e cor. Escolha "Nenhum" para removê-la.
- Copie o CSS e o HTML.
Quantidade vs. largura
column-count define o número de colunas. column-width define a largura ideal e deixa o navegador encaixar o máximo de colunas possível. Quando você define as duas, a forma abreviada columns: 200px 3 significa "até 3 colunas, cada uma com pelo menos 200px de largura", que é a forma habitual de fazer o layout se ajustar bem em telas pequenas.
Dicas
- Colunas são ideais para textos longos. Para grades de cartões e layouts de página, use CSS Grid, veja o CSS Grid Generator.
- Use
break-inside: avoidem elementos filhos, como figuras, que não devem ser divididos entre colunas. - A linha divisória não ocupa espaço próprio. Ela fica no meio do espaçamento.
Privacidade
Tudo roda no seu navegador. Suas configurações nunca são enviadas.