Gerador de CSS Grid
Monte layouts CSS Grid visualmente: grid-template-columns/rows, áreas nomeadas com validação, gaps, alinhamento e posicionamento por item. Copie CSS limpo.
Predefinições
Contêiner
Uma linha por fileira, nomes separados por espaços e um ponto (.) para célula vazia. Cada nome deve formar um retângulo.
Elemento 1
Selecione um item aqui ou clique nele na pré-visualização.
Exemplos: 1 / 3, span 2, 2 / -1. Um nome de área substitui o posicionamento por linhas.
Pré-visualização
Arraste o canto inferior da pré-visualização para redimensionar o contêiner.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}Ferramentas Relacionadas
Ver TodasO que é Gerador de CSS Grid?
Um construtor de layouts CSS Grid em que você digita qualquer template de trilhas (por exemplo repeat(auto-fill, minmax(120px, 1fr))), desenha áreas nomeadas, define gaps e alinhamento e posiciona itens individuais por números de linha, spans ou nomes de área. A prévia ao vivo usa o CSS gerado.
Como usar Gerador de CSS Grid
- Comece por uma predefinição (3 colunas, Cards responsivos, Holy grail, Barra lateral, Bento) ou digite grid-template-columns e grid-template-rows.
- Opcionalmente, escreva grid-template-areas: uma linha por fileira, nomes separados por espaços e um ponto para uma célula vazia.
- Defina row-gap, column-gap, justify-items, align-items e o número de itens.
- Selecione um item e defina grid-column, grid-row (por exemplo 1 / 3, span 2) ou escolha uma grid-area.
- Copie o código CSS.
Exemplo
grid-template-columns 200px 1fr, row-gap 8px, column-gap 16px; item 2: grid-column 1 / 3, grid-row span 2
.container {
display: grid;
grid-template-columns: 200px 1fr;
gap: 8px 16px;
}
.item-2 {
grid-column: 1 / 3;
grid-row: span 2;
} Quando usar Gerador de CSS Grid
Use grid para layouts bidimensionais: esqueletos de página, dashboards, galerias e grades de cards. Para uma única linha ou coluna de itens dimensionados pelo conteúdo, o flexbox costuma ser mais simples (veja o Gerador de Flexbox CSS).
Como funciona Gerador de CSS Grid
Templates e valores de posicionamento são conferidos com o próprio CSS.supports() do navegador, então tudo o que é válido em CSS é aceito e valores inválidos são sinalizados. O texto das áreas é validado: cada fileira precisa ter o mesmo número de células e cada nome deve formar um único retângulo. A saída contém display: grid, os templates, grid-template-areas com uma string entre aspas por fileira, gap (um valor se os gaps de linha e coluna forem iguais, row column caso contrário) e o alinhamento só quando não for stretch. Os itens recebem regras grid-area ou grid-column/grid-row somente quando definidas.
Casos de Uso Comuns
- Esqueletos de página com cabeçalho, barra lateral, conteúdo e rodapé
- Galerias de cards responsivas com auto-fill e minmax()
- Dashboards estilo bento com blocos que ocupam várias células
- Layouts de revista com áreas nomeadas
- Layouts de formulário com colunas de rótulo e campo
Perguntas Frequentes
Por que diz que minha área não é um retângulo?
Em grid-template-areas, cada nome precisa ocupar um bloco retangular de células. Formatos em L ou nomes divididos em lugares separados são CSS inválido e a propriedade inteira seria ignorada.
Qual a diferença entre auto-fill e auto-fit?
Os dois criam quantas colunas couberem. O auto-fill mantém trilhas vazias, enquanto o auto-fit as recolhe para que os itens existentes se estiquem e preencham a linha.
Como faço um item ocupar a largura toda?
Defina grid-column como 1 / -1; -1 se refere à última linha do grid.