Softonic

Gerador de CSS Grid

Etapa 1 / 3
Próximo

CSS Grid é o jeito padrão de criar layouts 2D, mas a sintaxe do contêiner é fácil de esquecer. Este gerador escreve as regras do contêiner para você: um número fixo de colunas de largura igual, o espaçamento entre as tracks e uma media query que alterna para colunas auto-fit abaixo de uma largura mínima, para o layout continuar legível em telas pequenas. O resultado é CSS puro de contêiner; o posicionamento dos itens fica por conta da sua própria folha de estilos.

Como construir uma grade

  1. 1

    Defina o número de colunas

    Entre 1 e 12 tracks de largura igual.

  2. 2

    Defina a largura mínima das colunas

    Abaixo dessa largura a grade muda para auto-fit, para cada coluna manter um tamanho mínimo utilizável.

  3. 3

    Defina o espaçamento

    O espaço entre colunas e linhas.

  4. 4

    Gere o CSS

    A ferramenta escreve as regras do contêiner mais o fallback responsivo.

  5. 5

    Copie o código

    Cole as regras do contêiner na sua folha de estilos e posicione os itens com suas próprias regras `grid-column` / `grid-row`.

O contêiner gerado

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;

@media (max-width: 660px) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
  • repeat(3, minmax(0, 1fr)): três colunas que dividem igualmente a largura disponível. 1fr é uma fração do espaço restante; minmax(0, 1fr) permite que as colunas encolham abaixo do tamanho do conteúdo.
  • gap: o espaço entre cada track.
  • A media query muda para repeat(auto-fit, minmax(220px, 1fr)), que cria quantas colunas couberem, cada uma com pelo menos 220px. O ponto de quebra é o número de colunas vezes a largura mínima (com um piso de 120px), então em telas pequenas a grade reorganiza as linhas em vez de espremer as colunas.

A unidade fr

fr significa “uma fração do espaço restante”: depois de subtrair as tracks de tamanho fixo, o espaço restante é dividido pelo número total de unidades fr.

grid-template-columns: 200px 1fr 2fr;

Em um contêiner de 1000px, a primeira coluna ocupa 200px e os 800px restantes se dividem 1:2, ou seja, 267px e 533px.

auto-fill vs. auto-fit

  • auto-fill: cria tracks vazias de preenchimento quando não há itens suficientes.
  • auto-fit: colapsa as tracks vazias a zero, então os itens restantes se esticam para preencher a linha.

O fallback responsivo usa auto-fit, que é o que as grades de cards querem: a linha sempre parece cheia.

Colunas de larguras diferentes

O gerador emite colunas iguais. Edite o resultado para misturar tamanhos: grid-template-columns: 200px 1fr 2fr; dá uma barra lateral fixa e duas colunas flexíveis na proporção 1:2. Para áreas nomeadas (grid-template-areas) ou posicionamento explícito (grid-column: 1 / 3), adicione essas regras manualmente por cima do contêiner gerado.

Grid vs. Flexbox

  • Grid: layout 2D explícito com tracks. Bom quando o layout tem estrutura de linhas e colunas (esqueleto de página, galeria, painel).
  • Flexbox: alinhamento 1D ao longo de um único eixo. Bom quando os itens fluem naturalmente (barra de navegação, fileira de botões).

Layouts reais costumam combinar os dois: Grid para o esqueleto da página e Flexbox dentro dos componentes.

Erros comuns

  • Esquecer min-width: 0 nos filhos: os itens da grade usam por padrão a largura mínima do conteúdo, o que impede as colunas fr de encolherem abaixo da palavra mais longa. Defina min-width: 0 nos filhos para deixá-los encolher.
  • Aninhar sem display: grid: um filho da grade não é em si uma grade, a menos que você declare.

Perguntas frequentes

Ela protege o layout em telas pequenas. A media query gerada muda para repeat(auto-fit, minmax(largura, 1fr)), então cada coluna mantém pelo menos essa largura e a grade cria mais linhas em vez de espremer as colunas.

O gerador emite colunas iguais. Edite a linha grid-template-columns do resultado para misturar tamanhos, por exemplo 1fr 2fr 1fr para uma coluna central larga, ou 200px 1fr para uma barra lateral fixa.

Geralmente porque o item tem o min-width: auto padrão, que equivale à largura mínima do conteúdo. Defina min-width: 0 no item da grade para ele encolher dentro da célula.

Grid quando o layout tem estrutura de linhas e colunas (uma página, uma galeria de fotos, um painel). Flexbox quando os itens fluem ao longo de um único eixo (uma barra de navegação, uma fileira de botões, uma pilha de campos de formulário).

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Gerador de Papel de Parede em Gradiente

Gere papéis de parede em gradiente borrados de três cores para laptop, telefone ou fundos do Zoom. Randomize ou defina o ângulo e o desfoque manualmente.

Gerador de Cores Análogas

Crie uma paleta análoga de cinco cores a partir de qualquer cor base, com o trio clássico, dois tons externos e valores hex, RGB e HSL.

Conversor de ASCII para Hex

Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.

Ferramenta disponível em outros idiomas