Linhas e colunas
Flexbox organiza um eixo por vez. Quando o layout precisa de linhas e colunas juntas, existe uma ferramenta pensada exatamente para isso.
Estudar esta lição interativa →O Flexbox é ótimo para organizar itens ao longo de um eixo, uma linha ou uma coluna. Mas, quando o layout precisa controlar linhas e colunas ao mesmo tempo, como uma galeria de fotos em grade ou o layout geral de uma página inteira, o display: grid costuma exigir bem menos código e menos gambiarra.
Pense numa cartela de bingo: um grid verdadeiro, com linhas e colunas numeradas, e cada número numa célula fixa do cruzamento entre uma linha e uma coluna. É exatamente esse controle bidimensional que grid-template-columns e grid-template-rows te dão, algo que o Flexbox (pensado para um eixo por vez) não oferece com a mesma naturalidade.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. 3 colunas de 100px, 2 linhas de 60px: os 6 itens preenchem a grade na ordem, célula por célula.
Repare na unidade fr (fração), muito usada em Grid: grid-template-columns: 1fr 1fr 1fr cria três colunas que dividem o espaço disponível em partes iguais, ajustando automaticamente conforme a tela muda de tamanho, sem depender de porcentagens calculadas na mão. Uma sutileza para quando a grade "não obedece": 1fr é, na verdade, minmax(auto, 1fr), e o auto faz a coluna se recusar a ficar menor que o seu conteúdo. Se um texto ou uma imagem larga estoura uma coluna, escreva minmax(0, 1fr) para colunas realmente iguais.
Assim como no Flexbox, gap define o espaço entre as células do grid de uma vez só, para todas elas. É preferível a colocar margin individual em cada item, que costuma criar espaçamentos irregulares nas bordas da grade.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Troque para três colunas.