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.

Última atualização: 2026-09-20

Construir uma disposição CSS Grid à mão

CSS Grid é o método de disposição bidimensional, que atende linhas e colunas ao mesmo tempo. Esta ferramenta permite trocar `grid-template-columns` e `rows`, `justify-items`, `align-items` e `gap` na tela, confirmar o resultado na hora e copiar o CSS pronto.

**Decidir entre isto e Flexbox é simples se você pensar em termos de um ou dois eixos.** Para dispor elementos numa só linha, Flexbox serve; **para uma disposição em que linhas e colunas devam alinhar-se juntas, Grid encaixa melhor.** A força própria do Grid é a unidade `fr`, que exprime uma parte do espaço sobrante: escreva `1fr 2fr` e a largura restante se reparte um para dois. **A outra coisa que merece ser guardada na memória é a forma `repeat(auto-fit, minmax(200px, 1fr))`.** Só com isso você obtém **uma disposição cujo número de colunas sobe e desce com a largura, sem uma única consulta de mídia.**

Como se usa

Comece por um ajuste predefinido Disposições habituais como três colunas ou um cabeçalho com barra lateral estão à mão.
Troque as definições de colunas e linhas **Usar `fr` permite repartir por proporção o espaço sobrante.**
Experimente as propriedades de alinhamento `justify-items` e `align-items` decidem como o conteúdo se assenta dentro de cada célula.
Copie o CSS gerado Assim que a disposição lhe satisfizer, pode ser colada diretamente no seu código.

Dicas para aproveitar melhor

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).

Quando é útil

Armar o esqueleto de uma página inteira

**Colocar cabeçalho, barra lateral, conteúdo e rodapé é precisamente aquilo em que o Grid se destaca.**

Dispor cartões em grade

**Combinar `auto-fit` com `minmax` faz o número de colunas mudar com a largura da tela.**

Alinhar um formulário

Alinhar as colunas de rótulos e campos deixa a vertical correr reta e lê-se bem melhor.

Aprender Grid

Trocar um valor e observar o resultado deixa claro como linhas e colunas se decidem.

Termos de CSS Grid

Contêiner de grade: O elemento pai a que se dá `display: grid`. Dentro dele definem-se as linhas e as colunas.
Fr: **A unidade que exprime uma parte do espaço sobrante.** Com `1fr 2fr`, a largura restante se reparte um para dois.
Grid-template-columns: Define a sequência e as larguras das colunas. `repeat()` poupa escrever o mesmo valor outra vez.
Minmax: A função que declara um mínimo e um máximo. **`minmax(200px, 1fr)` significa "garanta 200 pixels e cresça se houver lugar".**
Auto-fit: A palavra-chave que cria tantas colunas quantas couberem. **Combinada com `minmax`, dobra sem consulta de mídia alguma.**
Gap: O espaço deixado entre linhas e colunas. As duas direções podem ser fixadas em separado.

Perguntas frequentes

Use o CSS Grid quando precisar controlar linhas e colunas ao mesmo tempo, como na estrutura geral de uma página ou em um painel de controle. Use o Flexbox quando bastar uma única direção (uma linha ou uma coluna) de itens, como uma barra de navegação ou uma fileira de cartões. Muitas páginas reais combinam os dois: Grid para a estrutura geral e Flexbox dentro dos componentes.

fr significa "fraction" (fração) e representa uma parte do espaço restante dentro do contêiner. Por exemplo, grid-template-columns: 1fr 2fr divide o espaço de forma que a segunda coluna fique duas vezes mais larga que a primeira. Diferente de uma unidade absoluta como px, as trilhas em fr mantêm sua proporção quando o contêiner é redimensionado.

repeat() é uma forma abreviada de repetir o mesmo padrão de trilha várias vezes, então repeat(3, 1fr) equivale a escrever grid-template-columns: 1fr 1fr 1fr. Ela permanece concisa mesmo quando o número de colunas é grande ou muda dinamicamente, pois basta indicar a quantidade e o tamanho da trilha.

O layout "holy grail" (santo graal) é uma estrutura clássica de página web que combina cabeçalho, barra lateral, conteúdo principal e rodapé. Antes do CSS Grid, isso exigia soluções complicadas com float ou tags de tabela, mas propriedades como grid-template-areas permitem reproduzi-lo com apenas algumas linhas de CSS.

grid-column: span N faz um item se estender horizontalmente por N trilhas (colunas). Por exemplo, atribuir grid-column: span 3 apenas ao item de cabeçalho faz com que ele ocupe toda a largura de uma grade de 3 colunas, enquanto os demais itens permanecem em suas células normais (grid-row aceita a mesma sintaxe de span).

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.

Ver todas as curiosidades