Gerador de CSS Grid
Ajuste grid-template-columns/rows, justify-items, align-items e gap por meio de uma interface gráfica interativa e visualize layouts reais de CSS Grid em tempo real. Copie o CSS gerado com um clique.
Dicas de uso
- A unidade fr em grid-template-columns: repeat(3, 1fr) representa uma fração do espaço restante, então a proporção das colunas permanece constante mesmo quando a largura da tela muda.
- A propriedade gap afeta apenas o espaçamento entre linhas e colunas, diferente da margin, que também afeta o exterior da grade. Você também pode definir row-gap e column-gap separadamente.
- Trilhas definidas como "auto" se ajustam ao tamanho real do conteúdo, o que é útil para colunas ou linhas cujo conteúdo tem comprimento imprevisível.
- Ao sobrescrever grid-column: span 2 em um único item, você pode fazer com que apenas o cabeçalho ou o rodapé ocupem toda a largura da grade.
- Use o Grid quando precisar de um layout bidimensional completo, e o Flexbox quando uma única linha ou coluna de itens for suficiente (veja também nosso gerador de CSS Flexbox).
Perguntas frequentes
Curiosidade — A "segunda dimensão" que o CSS Grid persegue e o Flexbox não cobre
O CSS Grid Layout foi projetado como um sistema de layout bidimensional que permite definir linhas e colunas ao mesmo tempo, em contraste com o Flexbox, que se concentra em organizar itens em uma única direção. Sua padronização no W3C começou por volta de 2011, e quando Chrome, Firefox, Safari e Edge implementaram o suporte quase simultaneamente em 2017, sua adoção em projetos reais decolou rapidamente.
Antes de o Grid existir, organizar uma página na clássica estrutura "holy grail" — cabeçalho, barra lateral, conteúdo principal e rodapé — exigia soluções complicadas baseadas em float ou tags de tabela. O CSS Grid introduziu propriedades declarativas como grid-template-columns, grid-template-rows e grid-template-areas, que permitem recriar esse layout familiar com apenas algumas linhas de CSS.
Hoje, boa parte do trabalho de design por trás de painéis de controle, galerias de imagens e layouts no estilo revista, centrados em linhas e colunas, é construída com CSS Grid. O suporte ao "subgrid", que permite que uma grade aninhada herde o dimensionamento de trilhas de sua grade pai, também se espalhou pelos principais navegadores, facilitando manter a consistência em layouts complexos de vários níveis.
Na prática, consolidou-se a convenção de que o Grid cuida da estrutura geral da página e o Flexbox cuida da disposição dos elementos dentro de cada componente. Os dois não são tecnologias concorrentes, mas ferramentas complementares, cada uma com um ponto forte diferente (alinhamento unidimensional versus posicionamento bidimensional em grade), e combiná-los em uma mesma página é considerado uma prática padrão.