Gerador de Grid CSS
Crie layouts CSS Grid com visualização interativa.
clique na célula para expandir
/* Contenedor */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
column-gap: 8px;
row-gap: 8px;
}Gerador de Grid CSS: layouts bidimensionais interativos
CSS Grid é o sistema de layout bidimensional mais poderoso do CSS, permitindo criar layouts complexos com linhas e colunas simultaneamente. Nosso gerador visual permite definir a estrutura do grid, unir células e gerar o código CSS correspondente sem escrever uma linha de código manualmente.
A ferramenta permite definir o número de colunas e linhas, os tamanhos usando a unidade fr (frações), pixels ou porcentagens, o gap entre células e expandir células para ocupar múltiplas colunas ou linhas (grid-column: span N). A pré-visualização mostra o layout resultante em tempo real enquanto edita a estrutura.
CSS Grid e Flexbox se complementam: Grid é melhor para a estrutura geral da página (layouts bidimensionais), enquanto Flexbox se destaca para alinhar conteúdo dentro de cada seção (layouts unidimensionais). O código gerado é CSS padrão compatível com todos os navegadores modernos e pode ser copiado diretamente para seu projeto.
Perguntas frequentes
O que significa a unidade "fr"?
A unidade "fr" (fração) representa uma fração do espaço disponível no container grid. Por exemplo, "1fr 2fr" cria duas colunas onde a segunda é o dobro da largura da primeira. É similar ao flex-grow mas mais intuitivo para definir proporções.
CSS Grid substitui o Flexbox?
Não, se complementam. Grid é melhor para layouts bidimensionais (linhas e colunas), enquanto Flexbox se destaca em layouts unidimensionais (uma linha ou coluna). É comum usar Grid para a estrutura geral da página e Flexbox para alinhar conteúdo dentro de cada seção.
Como faço uma célula ocupar várias colunas?
Na nossa ferramenta, clique na célula e use os botões "+" para expandi-la. Em CSS, isso é feito com "grid-column: span 2" (para 2 colunas) ou "grid-row: span 2" (para 2 linhas). Também pode especificar posições exatas com "grid-column: 1 / 3".
Quer saber mais? Leia nosso guia completo →