Como usar: Gerador de CSS Grid
- Defina o número de colunas e linhas e os espaçamentos (gaps) — ou comece por um preset como Holy grail.
- Edite o tamanho das trilhas (acima da grade para colunas, à esquerda para linhas):
1fr,240px,auto,minmax(0, 1fr). - Arraste sobre as células para criar uma área e dê a ela um nome, como
headerousidebar. - Copie o CSS e o esqueleto HTML para o seu projeto.
Áreas de grid em resumo
grid-template-areas permite desenhar o layout com nomes: cada string é uma linha, cada palavra é uma coluna, e um ponto (.) deixa a célula vazia. Os filhos são posicionados com grid-area: nome, então o CSS se lê como uma imagem da página.
.layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-areas:
"header header"
"sidebar main";
}Tamanhos de trilha
| Valor | Significado |
|---|---|
1fr | uma fração do espaço livre |
minmax(0, 1fr) | como 1fr, mas um conteúdo longo não consegue esticar a coluna |
auto | do tamanho do conteúdo |
240px, 20rem | um tamanho fixo |
repeat(auto-fill, minmax(200px, 1fr)) | quantas colunas couberem — ótimo para grades de cards |
As áreas precisam ser retângulos — a ferramenta só permite desenhar retângulos, então o CSS é sempre válido. Para uma única linha ou coluna de itens, o flexbox costuma ser mais simples. Relacionados: Calculadora de Clamp, Formatador de CSS.
Também pesquisado como: gerador css grid, gerador de grid layout, construtor css grid, gerador grid-template-areas, css grid template, gerador de grid responsivo, grid css online, gerador de layout.
Ferramentas que combinam com: Gerador de CSS Grid
- Gerador de Flexbox CSS — Veja exatamente o que cada propriedade flexbox faz: defina a direção, a quebra de linha, o justify-content, o align-items e o gap, adicione ou remova itens e clique em qualquer um deles para ajustar o flex-grow, shrink, basis, order e align-self.
- Gerador de Border Radius — Arredonde os cantos de qualquer caixa: arraste um controle deslizante para todos os cantos ou defina cada canto separadamente, mude para cantos elípticos para criar formas de blob e folha e copie o CSS border-radius válido mais curto.
- Gerador de Box Shadow — Empilhe várias camadas de sombra, ajuste deslocamento, desfoque, espalhamento e opacidade em um cartão ao vivo e copie o CSS de box-shadow ou text-shadow.
- Gerador de Gradiente CSS — Monte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma predefinição e copie um CSS pronto para produção, com uma cor sólida de fallback.
Perguntas frequentes
Como criar um layout com CSS Grid?
Defina colunas e linhas, arraste sobre as células para definir áreas nomeadas (header, sidebar, main…) e copie o CSS gerado de grid-template-columns, grid-template-rows e grid-template-areas, junto com o HTML.
Qual é a diferença entre 1fr e minmax(0, 1fr)?
O 1fr tem como mínimo o tamanho do seu conteúdo, então uma palavra longa ou uma imagem larga pode fazer a coluna crescer. Já o minmax(0, 1fr) permite que a coluna encolha abaixo do tamanho do conteúdo, mantendo as colunas iguais.
Por que as áreas de grid precisam ser retângulos?
A especificação do CSS Grid só permite áreas nomeadas retangulares; uma área em formato de L torna toda a declaração grid-template-areas inválida.
Como deixar o grid responsivo?
Adicione uma media query que redefina grid-template-columns e grid-template-areas para telas pequenas — por exemplo, uma única coluna com "header" "main" "sidebar".
Posso instalar o Gerador de CSS Grid como um aplicativo da web e usá-lo offline?
Sim. O Gerador de CSS Grid é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.