Gerador CSS Grid
Gere uma declaração de contêiner CSS Grid — display: grid com colunas de largura igual, linhas de altura igual e um espaço — a partir de controles simples de coluna/linha/espaço.
Entrada
Saída
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-grid-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"columns": "3",
"rows": "2",
"gap": "16"
}'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-grid-generator` tool (CSS Grid 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-grid-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador CSS Grid — 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 que é CSS Grid?
CSS Grid é o sistema de layout construído para designs bidimensionais — linhas e colunas ao mesmo tempo, diferentemente de Flexbox, que posiciona itens ao longo de um único eixo. Transformar qualquer elemento em um grid requer uma declaração, display: grid;, mais uma descrição das faixas que deve ter. Esta ferramenta gera essa declaração para o caso mais comum: um grid dividido uniformemente com colunas de largura igual e linhas de altura igual, com espaçamento consistente entre as células.
As propriedades que esta ferramenta gera
display: grid;— transforma o elemento em um contêiner de grid; seus filhos diretos se tornam automaticamente itens de grid.grid-template-columns: repeat(N, 1fr);— criaNcolunas, cada uma ocupando uma fração igual (1fr) da largura disponível.repeat()é uma forma abreviada de escrever1frNvezes.grid-template-rows: repeat(M, 1fr);— a mesma ideia aplicada às linhas:Mlinhas de altura igual.gap: Npx;— o espaço entre linhas e colunas, substituindo o antigo pargrid-row-gap/grid-column-gappor uma forma abreviada única.
Como usar esta ferramenta
- Arraste o controle deslizante Colunas para definir quantas colunas de largura igual o grid deve ter (1–12).
- Arraste o controle deslizante Linhas para definir quantas linhas de altura igual ele deve ter (1–12).
- Arraste o controle deslizante Gap para definir o espaçamento, em pixels, entre as células do grid.
- Copie o CSS gerado da caixa CSS, ou baixe como um arquivo
.css, e aplique ao seu elemento contêiner — por exemplo,.grid-container { ...CSS gerado... }.
A saída é atualizada instantaneamente conforme você move qualquer controle deslizante — não há uma etapa "generate" separada.
FAQ
Preciso adicionar algo aos elementos filhos?
Não. Depois que o elemento pai tem display: grid; e as faixas de template, os filhos diretos são posicionados automaticamente, preenchendo as células da esquerda para a direita, de cima para baixo. Você só precisa de CSS adicional em um filho se quiser que ele se estenda por várias células (grid-column: span 2;) ou fique em um local específico.
O que significa 1fr?
fr é a abreviação de "fraction" — uma unidade única para Grid. 1fr significa "uma parte de qualquer espaço que reste após faixas de tamanho fixo e gaps serem contabilizados." Como cada coluna aqui usa 1fr, a largura disponível é dividida uniformemente entre todas elas, e o grid redimensiona automaticamente com o contêiner.
Posso fazer colunas com larguras diferentes, como 200px 1fr 200px?
Esta ferramenta se concentra no caso coluna-igual/linha-igual, que cobre a maioria dos layouts de grid (galerias de imagens, grids de cartões, dashboards). Para faixas fixas/flexíveis mistas, substitua o valor repeat(N, 1fr) gerado pela sua própria lista de tamanhos separados por espaço (200px 1fr 200px) — o resto da declaração permanece inalterado.
Qual é a diferença entre gap e margin/padding?
gap apenas adiciona espaço entre as células do grid — nunca adiciona espaço ao redor da borda externa do contêiner de grid da forma que margin ou padding fariam. Isso a torna uma escolha mais previsível para espaçamento interno consistente.
CSS Grid é suportado em todos os navegadores?
Sim. display: grid e as propriedades que esta ferramenta gera são suportadas, sem prefixo, em todos os navegadores principais desde 2017.
Privacidade
Tudo acontece no seu navegador. Nenhum CSS, valor ou configuração que você digitar é jamais enviado para um servidor — a declaração é gerada e atualizada localmente conforme você ajusta os controles deslizantes.