Gerador de grade CSS

Como usar

1. Defina as dimensões da grade : insira o número de colunas e linhas do seu layout.
2. Defina as pistas : ajuste a largura de cada coluna e a altura de cada linha com unidades fr, pixels, porcentagens, auto ou minmax().
3. Copie o CSS : as propriedades display: grid, grid-template-columns, grid-template-rows e gap geradas estão prontas para colar na sua folha de estilo.

Por que usar o gerador CSS Grid ?

O CSS Grid é o sistema de layout mais poderoso do CSS, capaz de criar layouts bidimensionais complexos que antes exigiam tabelas, floats ou JavaScript. Mas dominar grid-template-columns, unidades fr, minmax(), repeat() e áreas nomeadas exige prática. Este gerador visual permite construir qualquer grade por clicar e arrastar, depois produz um CSS limpo para usar imediatamente ou estudar para aprofundar seu entendimento do Grid.

Funcionalidades

• Construtor visual de grade : clique para definir visualmente as pistas de colunas e linhas.
• Suporte a unidades fr : use unidades fr flexíveis para colunas proporcionais responsivas.
• Atalho minmax() : crie facilmente colunas responsivas com restrições de tamanho mínimo e máximo.
• Controle do espaço : ajuste column-gap e row-gap independentemente.
• Áreas nomeadas : defina grid-template-areas com uma interface visual de pintura de áreas.

Perguntas frequentes

O que é uma unidade « fr » em CSS Grid ?

A unidade fr (fração) distribui o espaço disponível proporcionalmente. Em uma grade de 3 colunas com 1fr 2fr 1fr, a coluna do meio recebe o dobro de espaço das externas. As unidades fr compartilham o espaço restante após a alocação das pistas de tamanho fixo.

Como criar uma grade responsiva sem media queries ?

Use repeat(auto-fill, minmax(200px, 1fr)) como valor de grid-template-columns. Isso cria tantas colunas quanto o tamanho mínimo permite, expandindo-se para preencher o espaço disponível. Os elementos se reorganizam automaticamente quando a largura do contêiner muda.

Qual a diferença entre grid-template e grid-auto ?

grid-template-columns/rows define as pistas explícitas que você especifica. grid-auto-columns/rows define o tamanho das pistas implícitas, colunas e linhas criadas automaticamente quando os elementos transbordam da grade explícita.

Uma breve história do CSS Grid

Antes do CSS Grid, os layouts web atravessaram três épocas dolorosas. Layouts baseados em tabelas (1995-2008) abusavam do elemento <table> para estrutura visual, com o «fatiamento» de composições do Photoshop em grades HTML. Layouts baseados em flutuantes (2008-2013) substituíram tabelas pela propriedade float, exigindo gambiarras «clearfix» como o micro-clearfix de Nicolas Gallagher (2011) para conter filhos com quebra de linha. Flexbox (CSS Flexible Box Layout Module Level 1, Recomendação W3C 2018) resolveu layouts unidimensionais mas tinha dificuldades com verdadeiras grades bidimensionais. A história do CSS Grid começou com a implementação -ms-grid da Microsoft no Internet Explorer 10 (2012), uma versão inicial que informou a especificação W3C. O primeiro rascunho público de trabalho W3C do CSS Grid Layout Module Level 1 saiu em abril de 2011, mas o impulso real veio do trabalho de defesa de Rachel Andrew (seu livro Get Ready for CSS Grid Layout, 2016) e Jen Simmons (defensora-desenvolvedora da Mozilla, circuito de conferências 2016-2018). A corrida entre navegadores se resolveu numa notável janela de dois meses em março de 2017: Chrome 57, Firefox 52, Safari 10.1 e Edge 16 entregaram Grid sem prefixos com semanas de diferença. O W3C marcou Grid Level 1 como Recomendação Candidata em dezembro de 2016; a Recomendação W3C final chegou em agosto de 2020. Subgrid (Level 2) chegou no Firefox 71 (dez. 2019), Safari 16 (set. 2022) e Chrome 117 (set. 2023). A próxima fronteira é o layout Masonry proposto (proposta do CSS Working Group 2020, atrás de flag no Firefox desde 2021).

A anatomia de uma grade CSS

• O contêiner de grade. display: grid (ou display: inline-grid) transforma qualquer elemento num contexto de grade. Os filhos diretos desse elemento tornam-se «itens de grade» e participam do layout da grade. Os netos não são afetados, a menos que também definam display: grid.
• grid-template-columns e grid-template-rows. Definem as trilhas explícitas (colunas e linhas). Os valores podem ser fixos (px, em, rem), flexíveis (fr, a unidade «fração» definida na especificação do CSS Grid), dimensionados ao conteúdo (auto, min-content, max-content), ou qualquer combinação. grid-template-columns: 200px 1fr 1fr cria uma barra lateral de 200px mais duas colunas flexíveis iguais.
• A unidade fr. A unidade de fração distribui o espaço restante depois que as trilhas de tamanho fixo são alocadas. 1fr 2fr 1fr dá à coluna central o dobro do espaço sobrante das colunas laterais. fr é exclusiva do Grid (e o equivalente relacionado flex-basis: 0 1 fr no Flexbox não é a mesma coisa). Resolve aquilo com que o padrão de «coluna percentual» lutou por décadas: distribuição limpa do espaço sobrante.
• repeat() e minmax(). repeat(3, 1fr) define de forma compacta três colunas iguais. minmax(200px, 1fr) restringe uma trilha a um intervalo. A combinação imbatível grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) produz uma grade responsiva que ajusta automaticamente o número de colunas para caber no contêiner, sem consultas de mídia. Essa única linha substituiu milhares de definições de pontos de quebra em CSS de produção.
• grid-template-areas. Uma sintaxe de strings visualmente dispostas que nomeia regiões da grade. Os filhos entram numa área nomeada com grid-area: header. O resultado é layout-como-arte-ASCII: qualquer um lendo o CSS pode visualizar a grade a partir do código-fonte. Particularmente potente para o layout «santo graal» (cabeçalho / barra lateral / principal / aside / rodapé) que derrotou designers CSS por uma década.
• gap (e column-gap, row-gap). Define o espaçamento entre trilhas. gap: 16px espaça uniformemente todas as linhas e colunas. Antes do Grid, isso exigia padrões padding+margin frágeis ou margens negativas cuidadosamente calculadas. A mesma propriedade gap foi posteriormente adicionada ao Flexbox (universalmente suportada desde 2022) e agora é considerada a forma canônica de tratar o espaçamento entre itens no CSS moderno.

Padrões Grid do mundo real

• Galerias de imagens. O padrão repeat(auto-fill, minmax(200px, 1fr)) é o CSS dominante para sites de portfólio (grades Behance), galerias de fotos (estilo Unsplash) e coleções de produtos. A auto-adaptação do número de colunas sem consultas de mídia era praticamente impossível antes do Grid.
• Painéis e painéis de administração. Grafana, Datadog, Stripe Dashboard e a maioria das interfaces de administração modernas usam áreas de grade nomeadas para posicionar cartões, barras laterais e regiões de conteúdo. Os construtores de painéis arrastar-e-soltar (DataDog, Looker, Tableau) traduzem ações do usuário em mutações de strings grid-template-areas.
• Layouts no estilo revista. Sites editoriais (The Guardian, NYT, Vox) usam Grid para layouts assimétricos com elementos sobrepostos, grandes imagens hero que abrangem múltiplas colunas e citações pull-quote que escapam da coluna de texto principal. O eixo z do Grid (z-index com áreas explícitas) lida naturalmente com a sobreposição.
• Grades de cartões de produto. Vitrines do Shopify, Amazon, Etsy. O padrão é tão comum que Tailwind CSS, Bootstrap e Bulma entregam componentes de cartões baseados em Grid como parte do conjunto utilitário central. A relação de aspecto dos cartões agora é tipicamente travada com a propriedade aspect-ratio (Safari 15, Chrome 88, 2021).
• O layout «santo graal». Cabeçalho / barra lateral esquerda / conteúdo principal / barra lateral direita / rodapé. Esse layout de 5 regiões foi o problema não resolvido do CSS por 15 anos. Com grid-template-areas e 8 linhas de CSS, tornou-se trivial em 2017. O padrão domina sites de documentação (Stripe Docs, MDN, Vercel Docs).
• Layouts de formulários. Formulários de duas colunas com rótulos à esquerda e entradas à direita, formulários de endereço com cidade/estado/CEP em uma linha, assistentes de múltiplos passos. Grid permite que rótulos e entradas se alinhem limpamente através das linhas mesmo quando as larguras de conteúdo variam. O padrão substituiu abordagens anteriores baseadas em gambiarras de largura de rótulo por CSS mais limpo.
• Posicionamento de modais e diálogos. display: grid; place-items: center; numa sobreposição de viewport completo centraliza perfeitamente um diálogo horizontal e verticalmente com uma única linha, substituindo décadas de padrões position: absolute; top: 50%; transform: translateY(-50%);. place-items é a forma canônica 2024 de centralizar conteúdo arbitrário.
• Responsivo sem consultas de mídia. Combinar repeat(auto-fill, minmax(...)) com gap produz layouts que se adaptam à largura do contêiner sem qualquer consulta de mídia. É a base do design responsivo moderno: layouts que respondem ao tamanho do contêiner em vez do tamanho do viewport, antecipando as Container Queries (agora também entregues, 2023).

Padrões e marcos

• IE10 -ms-grid (2012). A Microsoft entregou a primeira implementação tipo Grid, projetada por Phil Cupp na Microsoft. A sintaxe diferia da especificação W3C eventual mas provou o conceito e influenciou decisões de design posteriores.
• CSS Grid Layout Module Level 1, Rascunho de Trabalho W3C (abril de 2011). O primeiro rascunho público W3C. Múltiplas iterações se seguiram; a sintaxe evoluiu significativamente entre 2011 e a implementação final de 2017.
• Defesa de Rachel Andrew e Jen Simmons (2014-2017). O livro de Andrew Get Ready for CSS Grid Layout (Smashing Magazine, 2016) e as palestras de conferência de Simmons como defensora-desenvolvedora da Mozilla construíram a base de conhecimento comunitário que tornou o envio pelos navegadores viável. Ambas são creditadas nas notas de editor W3C da especificação.
• Corrida de navegadores, março de 2017. Dentro de uma notável janela de dois meses, Chrome 57 (9 de março), Firefox 52 (7 de março), Safari 10.1 (27 de março) e Edge 16 (outubro de 2017) entregaram Grid sem prefixos. Esse nível de envio multi-navegador sincronizado foi quase sem precedentes para uma funcionalidade dessa complexidade.
• Recomendação Candidata (dezembro de 2016). CSS Grid Level 1 foi promovida a Recomendação Candidata W3C, o estágio final antes da Recomendação W3C. A fase CR tipicamente leva anos; Grid se moveu mais rápido que a maioria das funcionalidades CSS nessa fase.
• Recomendação W3C (agosto de 2020). Grid Level 1 foi finalizada como Recomendação W3C. Essa é tecnicamente a data de «lançamento» da especificação, mas todos os principais navegadores haviam entregue uma implementação funcional três anos antes.
• Subgrid (Level 2, 2019-2023). Subgrid permite que um item de grade herde as definições de trilha de seu pai, resolvendo o problema de «alinhamento de grades aninhadas». Firefox 71 (dez. 2019), Safari 16 (set. 2022), Chrome 117 (set. 2023). O lento lançamento do Chrome refletiu a complexidade de implementação.
• Layout Masonry (proposto, 2020-). O CSS Working Group tem debatido a sintaxe desde 2020. O Firefox o entregou atrás de flag em 2021. Layouts fluentes no estilo Pinterest que empacotam itens em colunas são o caso de uso alvo. A equipe do Chrome (liderada pela Apple) e a equipe da Mozilla propuseram sintaxes concorrentes; resolução pendente desde 2024.

Perguntas frequentes adicionais

Quando devo usar Grid em vez de Flexbox?

O atalho comunitário: Flexbox é para uma dimensão, Grid para duas. Se você está dispondo uma fileira de botões ou alinhando itens em uma única direção, Flexbox é mais simples. Se você está projetando um layout de página inteira com linhas e colunas que devem se alinhar, Grid é a ferramenta certa. Muitos layouts reais combinam ambos: Grid para o esqueleto da página, Flexbox para alinhamento em nível de componente dentro de cada área de grade. Frameworks modernos (Tailwind, Bootstrap 5) abraçam esse padrão.

O CSS Grid funciona em navegadores antigos?

Todos os navegadores evergreen (Chrome, Firefox, Safari, Edge) suportam Grid desde março de 2017. O Internet Explorer 11 tem apenas a sintaxe antiga -ms-grid (subconjunto, prefixado, faltando muitas funcionalidades). Para suporte ao IE11, use consultas @supports para recuar ao Flexbox ou layouts baseados em flutuantes. A partir de 2024, o IE11 tem menos de 0,5 % de uso global, então a maioria das equipes abandonou o fallback. O Caniuse.com relata mais de 97 % de suporte global para Grid sem prefixos.

Qual é a diferença entre grid-template-areas e grid-area?

grid-template-areas é definido no contêiner de grade e mapeia visualmente as regiões nomeadas da grade (uma string por linha). grid-area é definido em um item de grade para atribuí-lo a uma dessas regiões nomeadas. Os dois trabalham juntos: o contêiner declara o «mapa», os itens declaram «eu sou a região X». Você também pode usar grid-area diretamente com números de linha (grid-area: 1 / 1 / 3 / 4) em vez de nomes, o que é útil para layouts dinâmicos.

O que é subgrid e quando devo usá-lo?

Subgrid permite que uma grade aninhada herde as definições de trilha de sua grade pai em vez de criar as suas próprias. Isso resolve o problema de alinhar itens através de grades aninhadas, por exemplo, um cartão com layout interno que deve se alinhar com cartões circundantes. Use grid-template-columns: subgrid na grade aninhada. Disponível no Firefox 71+ (dez. 2019), Safari 16+ (set. 2022), Chrome 117+ (set. 2023). Recua para uma grade aninhada normal em navegadores que não a suportam.

Como Grid interage com acessibilidade?

O posicionamento Grid não altera a ordem de origem do DOM: os itens aparecem na posição visual que você atribui, mas leitores de tela e ordem de tabulação por teclado seguem a origem. WCAG 2.1 SC 1.3.2 Sequência significativa exige que a ordem de origem faça sentido quando os estilos forem retirados. A implicação: projete primeiro sua origem DOM para uma ordem de leitura lógica, então use Grid para posicionar os itens visualmente. Se você reordenar itens drasticamente com grid-column: 3 / 5; grid-row: 2, audite com um leitor de tela para confirmar que a ordem falada ainda faz sentido.