Gerador CSS Grid

Crie um layout bidimensional com trilhas explícitas e implícitas e itens individuais. O navegador calcula o layout; o editor apresenta as regras declaradas.

Prévia da grade

Configurações da grade

Dimensões

Largura da amostra

100–1600

Altura da amostra

100–1200

Espaçamento

Espaçamento interno

0–48

Lacuna entre linhas

0–100

Lacuna da coluna

0–100

Fluxo e alinhamento

Direção

Modo de escrita

Posicionamento automático

Alinhamento do conteúdo no eixo inline

Alinhar conteúdo

Alinhamento dos itens no eixo inline

Alinhar itens

Modo de posicionamento

Tamanho das trilhas

Reordenar trilhas não altera o posicionamento dos itens. Linhas negativas são contadas a partir do fim da grade explícita.

Colunas explícitas

Trilha 1

Tamanho da trilha

Mínimo

Valor

0–1200

Máximo

Valor

0–12

Trilha 2

Tamanho da trilha

Mínimo

Valor

0–1200

Máximo

Valor

0–12

Trilha 3

Tamanho da trilha

Mínimo

Valor

0–1200

Máximo

Valor

0–12

Linhas explícitas

Trilha 1

Tamanho da trilha

Mínimo

Valor

0–1200

Máximo

Valor

0–12

Trilha 2

Tamanho da trilha

Mínimo

Valor

0–1200

Máximo

Valor

0–12

Padrão das colunas implícitas

Trilha 1

Tamanho da trilha

Tamanho

Padrão das linhas implícitas

Trilha 1

Tamanho da trilha

Tamanho

Itens na ordem do código-fonte

Texto do item

Até 120 unidades de código UTF-16; o texto não é interpretado como HTML.

Ordem

-10–10

Tamanho da fonte

8–48

Alinhamento do item no eixo inline

Alinhamento do item

Tamanho mínimo

Largura preferida

Altura preferida

Posição na coluna

Regra de posicionamento

Posição na linha

Regra de posicionamento

Código gerado

.grid-demo {
  display: grid;
  box-sizing: border-box;
  width: 720px;
  height: 400px;
  padding: 16px;
  border: 1px solid #64748B;
  overflow: auto;
  direction: ltr;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr);
  grid-template-rows: minmax(80px, 1fr) minmax(80px, 1fr);
  grid-template-areas: none;
  grid-auto-columns: auto;
  grid-auto-rows: auto;
  grid-auto-flow: row;
  row-gap: 12px;
  column-gap: 12px;
  justify-content: start;
  align-content: start;
  justify-items: stretch;
  align-items: stretch;
  color: #0F172A;
  background: #F1F5F9;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

.grid-demo > .grid-item {
  box-sizing: border-box;
  margin: 0;
  padding: 8px;
  border: 1px solid #0F766E;
  background: #CCFBF1;
  white-space: pre-wrap;
  overflow-wrap: normal;
  word-break: normal;
  overflow: visible;
}

.grid-demo > .grid-item-1 {
  grid-column: auto / auto;
  grid-row: auto / auto;
  justify-self: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

.grid-demo > .grid-item-2 {
  grid-column: auto / auto;
  grid-row: auto / auto;
  justify-self: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

.grid-demo > .grid-item-3 {
  grid-column: auto / auto;
  grid-row: auto / auto;
  justify-self: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

.grid-demo > .grid-item-4 {
  grid-column: auto / auto;
  grid-row: auto / auto;
  justify-self: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

.grid-demo > .grid-item-5 {
  grid-column: auto / auto;
  grid-row: auto / auto;
  justify-self: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

.grid-demo > .grid-item-6 {
  grid-column: auto / auto;
  grid-row: auto / auto;
  justify-self: auto;
  align-self: auto;
  order: 0;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  font-size: 16px;
}

Colunas explícitas: 3 · Linhas explícitas: 2 · Itens na ordem do código-fonte: 6

Usar o código

O fragmento HTML precisa do CSS. O download completo do exemplo usa o mesmo documento da visualização, incluindo a redefinição do documento e a política de recursos.

Ordem visual e ordem do código-fonte

Posicionamento, order e preenchimento denso podem alterar a ordem visual, mas não a ordem de leitura ou foco no HTML. Mova itens para mudar a ordem no código.

Tamanho da prévia

Ajustar apenas escala a prévia de tamanho fixo; não cria pontos de quebra responsivos. O contêiner permite rolagem quando há transbordamento.

Direções da grade

Colunas: esquerda → direita; linhas: cima → baixo.

Detalhes declarados da grade

Tamanho das trilhas

Reordenar trilhas não altera o posicionamento dos itens. Linhas negativas são contadas a partir do fim da grade explícita.

Colunas explícitas

minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr)

Linhas explícitas

minmax(80px, 1fr) minmax(80px, 1fr)

Padrão das colunas implícitas

auto

Padrão das linhas implícitas

auto

Itens em ordem de código

Item 1: Posição na coluna auto / auto; Posição na linha auto / auto · Ordem: 0 · Tamanho mínimo: auto
Item 2: Posição na coluna auto / auto; Posição na linha auto / auto · Ordem: 0 · Tamanho mínimo: auto
Item 3: Posição na coluna auto / auto; Posição na linha auto / auto · Ordem: 0 · Tamanho mínimo: auto
Item 4: Posição na coluna auto / auto; Posição na linha auto / auto · Ordem: 0 · Tamanho mínimo: auto
Item 5: Posição na coluna auto / auto; Posição na linha auto / auto · Ordem: 0 · Tamanho mínimo: auto
Item 6: Posição na coluna auto / auto; Posição na linha auto / auto · Ordem: 0 · Tamanho mínimo: auto

Fluxo e alinhamento

O alinhamento do conteúdo posiciona trilhas; o dos itens posiciona cada item em sua área. O dimensionamento flexível ou stretch pode consumir o espaço livre.

Seu exemplo é gerado localmente. Esta ferramenta não carrega nem salva o texto ou código de amostra.

Como criar uma grade

Defina o tamanho da amostra, as trilhas, o fluxo, a direção, os espaçamentos e o alinhamento.
Edite textos e posições, altere a ordem no código ou use retângulos de áreas nomeadas. Corrija campos incompletos ou conflitantes.
Confira a prévia e o código, copie CSS ou HTML ou baixe o mesmo documento completo da prévia.

Entenda as regras

As trilhas explícitas vêm do modelo; a colocação automática ou fora dele pode criar trilhas implícitas segundo padrões próprios.

fr divide o espaço restante segundo o algoritmo Grid, não uma porcentagem da caixa externa. 1fr tem mínimo automático; minmax(0px, 1fr) o altera. O mínimo do item é uma escolha separada.

Linhas, order e dense podem mudar a ordem visual sem alterar leitura ou foco no HTML. Os controles de mover alteram a ordem real do código.

Colunas seguem o eixo inline e linhas o eixo block; na escrita vertical suas direções físicas mudam. Ajustar apenas escala a prévia e não cria pontos de quebra.

Exemplos

Com largura border-box de 640px, bordas de 1px e preenchimento de 16px em cada lado, a área interna mede 606px. Após dois espaços de 12px e uma trilha de 120px restam 462px; em condições simples, 1fr e 2fr recebem 154px e 308px. O resultado real pode variar.

Em três colunas explícitas, -1 indica a última linha explícita, mesmo que surjam colunas implícitas. O número negativo permanece no CSS.

Em duas colunas, header pode ocupar a primeira linha, nav e main a segunda e footer a terceira. Cada área é retangular; células vazias usam ponto.

Limites do editor

Há 1–12 trilhas explícitas e 1–4 tamanhos implícitos por eixo, além de 1–12 itens. Há minmax, linhas, spans e retângulos nomeados, não CSS arbitrário.

Não há repeat, auto-fit, auto-fill, subgrid, masonry, grades aninhadas ou gerador de pontos de quebra. Trilhas flexíveis não garantem um site responsivo.

Porcentagens somadas aos espaçamentos podem transbordar. Conteúdo, fontes, mínimos automáticos, bordas e barras de rolagem afetam o layout.

No modo de linhas, sobreposição é permitida, mas linhas definidas iguais ou invertidas são rejeitadas. Áreas nomeadas devem ser únicas, internas e sem sobreposição.

Prévia e download compartilham um documento com margem da página zerada. Em outro site, o fragmento pode ser afetado por estilos e métricas do navegador.

Exemplo local

O texto é escapado e o código é criado localmente, sem envio nem gravação em URL ou histórico. A prévia usa sandbox vazio e política restritiva de recursos; isso não certifica outros serviços ou alterações posteriores.

Perguntas sobre CSS Grid

Não. Apenas escala um quadro de tamanho fixo; não gera consultas de mídia nem repetição automática.

Não. fr divide o espaço restante segundo as regras do Grid; porcentagens usam outra referência e os mínimos influenciam o resultado.

Trilhas, espaços e conteúdo podem precisar de mais espaço. O contêiner rola; o editor não altera mínimos ou quebra de palavras em segredo.

Aplica min-width: 0px e min-height: 0px ao item em vez dos mínimos automáticos. Isso é separado do mínimo minmax da trilha.

Do fim da grade explícita, não do fim da grade implícita resultante. Linha zero é inválida.

Cada item precisa de nome válido e único e retângulo positivo, sem sobreposição e dentro da grade explícita.

Não. Ele pode preencher espaços visuais anteriores sem alterar a ordem do HTML nem o foco padrão.

O mesmo documento UTF-8 da prévia, com CSS, texto escapado, ajuste de margens e restrições de recursos. O sandbox do iframe não acompanha o arquivo.

Fontes

Especificações que descrevem o comportamento do exemplo.

Descrições das fontes verificadas em 09/11/2026.

O navegador calcula o layout; as especificações não certificam esta implementação.

SVG para PNG

Converta um ficheiro SVG local ou código colado em PNG, com dimensões definidas, transparência e tipos de letra incluídos.

Abrir ferramenta — SVG para PNG

Gerador de filtros CSS

Ordene e repita efeitos CSS, compare uma amostra e copie a declaração exata.

Abrir ferramenta — Gerador de filtros CSS

Calculadora de tamanho de fonte fluido

Defina o tamanho da fonte em duas larguras de janela. Copie o CSS com unidades relativas à raiz e confira o modelo calculado com os mesmos coeficientes exportados.

Abrir ferramenta — Calculadora de tamanho de fonte fluido

Gerador de botão CSS

Personalize estados de botão nativo, confira o foco e copie HTML e CSS.

Abrir ferramenta — Gerador de botão CSS

Gerador CSS de border-radius

Edite oito raios, visualize uma caixa e copie o CSS em pixels ou porcentagens.

Abrir ferramenta — Gerador CSS de border-radius

Gerador CSS Flexbox

Crie um exemplo Flexbox com controles de contêiner e item, eixos de layout explícitos, CSS e HTML correspondentes e um download local de exemplo completo.

Abrir ferramenta — Gerador CSS Flexbox

Gerador CSS de sombra de texto

Crie sombras de texto ordenadas, visualize texto simples e copie o CSS exato.

Abrir ferramenta — Gerador CSS de sombra de texto

Gerador de transformação CSS

Componha transformações 2D CSS repetíveis, edite px ou conversão percentual e origem, inspecione uma caixa de referência e copie as declarações atuais exatas.

Abrir ferramenta — Gerador de transformação CSS

Gerador de sombra CSS

Crie camadas box-shadow ordenadas, visualize e copie o código CSS.

Abrir ferramenta — Gerador de sombra CSS

Marca d’água em imagens

Adicione texto ou logotipo a imagens, confira os resultados e baixe arquivos individuais ou um ZIP.

Abrir ferramenta — Marca d’água em imagens

Gerador de gradiente CSS

Crie gradientes lineares ou radiais com cores, opacidade e pontos ajustáveis.

Abrir ferramenta — Gerador de gradiente CSS

Conversor de cores

Converta valores sRGB HEX, RGB e HSL compatíveis com alfa e precisão explícita.

Abrir ferramenta — Conversor de cores

Imagem para texto (OCR)

Reconheça texto impresso em PNG ou JPEG local, escolha o idioma e confira ou corrija antes de copiar ou baixar.

Abrir ferramenta — Imagem para texto (OCR)

Leitor de QR Code em imagem

Leia um QR Code de um PNG ou JPEG local e examine o texto ou os bytes sem abrir links.

Abrir ferramenta — Leitor de QR Code em imagem

Verificador de contraste de cores

Compare as cores do primeiro plano e do fundo, ajuste a opacidade e confira os limites numéricos de contraste WCAG para texto e detalhes essenciais da interface.

Abrir ferramenta — Verificador de contraste de cores

Calculadora de tamanho de impressão e resolução

Calcule o tamanho da impressão, os pixels necessários e o PPI efetivo com margens ou corte.

Abrir ferramenta — Calculadora de tamanho de impressão e resolução

Calculadora de proporção de imagem

Calcule a proporção entre largura e altura ou novas dimensões em pixels a partir de um lado definido.

Abrir ferramenta — Calculadora de proporção de imagem

Compressor de imagens

Tente ajustar um JPEG, PNG ou WebP ao tamanho de arquivo desejado, com resultado medido e opção de reduzir as dimensões.

Abrir ferramenta — Compressor de imagens

HEIC para JPG

Converta fotos HEIC compatíveis localmente em JPGs no tamanho original, ajuste a qualidade e o fundo e baixe os resultados verificados individualmente ou em ZIP.

Abrir ferramenta — HEIC para JPG

Conversor de imagens

Converta imagens PNG, JPEG e WebP localmente, ajuste transparência, fundo e qualidade e baixe os resultados.

Abrir ferramenta — Conversor de imagens

Criador de colagem de fotos

Organize fotos locais em uma grade e baixe em PNG ou JPEG.

Abrir ferramenta — Criador de colagem de fotos

Girar e espelhar imagens

Gire ou espelhe um lote local de imagens estáticas PNG, JPEG e WebP e confira e baixe os resultados processados.

Abrir ferramenta — Girar e espelhar imagens

Cortar imagem

Corte um JPEG, PNG ou WebP local com precisão em pixels e baixe o resultado em PNG ou JPEG.

Abrir ferramenta — Cortar imagem

Redimensionar imagem

Redimensione JPG, PNG ou WebP em pixels ou porcentagem, confira a prévia e baixe o resultado.

Abrir ferramenta — Redimensionar imagem

Ver todas as ferramentas desta categoria

Configurações da grade

Dimensões

Espaçamento

Fluxo e alinhamento

Tamanho das trilhas

Colunas explícitas

Trilha 1

Trilha 2

Trilha 3

Linhas explícitas

Trilha 1

Trilha 2

Padrão das colunas implícitas

Trilha 1

Padrão das linhas implícitas

Trilha 1

Itens na ordem do código-fonte

Posição na coluna

Posição na linha

Código gerado

Usar o código

Ordem visual e ordem do código-fonte

Tamanho da prévia

Direções da grade

Tamanho das trilhas

Itens em ordem de código

Fluxo e alinhamento

Como criar uma grade

Entenda as regras

Exemplos

Limites do editor

Exemplo local

Perguntas sobre CSS Grid

1fr é igual a uma porcentagem?

Por que há transbordamento?

O que faz permitir tamanho menor que o conteúdo?

De onde contam as linhas negativas?

Por que uma área nomeada é rejeitada?

O preenchimento dense muda a ordem de leitura?

O que há no HTML baixado?

Ferramentas relacionadas

SVG para PNG

Gerador de filtros CSS

Calculadora de tamanho de fonte fluido

Gerador de botão CSS

Gerador CSS de border-radius

Gerador CSS Flexbox

Gerador CSS de sombra de texto

Gerador de transformação CSS

Gerador de sombra CSS

Marca d’água em imagens

Gerador de gradiente CSS

Conversor de cores

Imagem para texto (OCR)

Leitor de QR Code em imagem

Verificador de contraste de cores

Calculadora de tamanho de impressão e resolução

Calculadora de proporção de imagem

Compressor de imagens

HEIC para JPG

Conversor de imagens

Criador de colagem de fotos

Girar e espelhar imagens

Cortar imagem

Redimensionar imagem