Como usar o CSS Grid para criar layouts em duas dimensões com linhas e colunas
O CSS Grid é um sistema de layout bidimensional: ele trabalha com linhas e colunas ao mesmo tempo. Ele é ideal para criar layouts complexos, como páginas inteiras, onde os elementos precisam se organizar tanto horizontalmente quanto verticalmente.
Para ativá-lo, aplique display: grid no elemento pai.
Carregando...Carregando...A propriedade grid-template-columns define o número e o tamanho das colunas.
Carregando...A unidade fr (fração) distribui o espaço disponível proporcionalmente.
Carregando...A propriedade grid-template-rows funciona da mesma forma para as linhas.
Carregando...A propriedade gap define o espaçamento entre as células do grid.
Carregando...A função repeat() evita repetição ao definir muitas colunas iguais.
Carregando...Combinado com auto-fill e minmax(), você cria grids que se ajustam automaticamente ao tamanho da tela:
Carregando...Isso cria quantas colunas couberem, com no mínimo 200px cada. É uma das técnicas mais poderosas para layouts responsivos sem media queries.
Os itens podem se expandir além de uma célula com grid-column e grid-row.
Carregando...Uma pergunta bem comum é: quando usar Flexbox e quando usar Grid? A resposta é até simples: use Flexbox para layouts de uma dimensão (uma linha ou uma coluna) e Grid para layouts de duas dimensões (linhas e colunas simultaneamente). Na prática, os dois costumam ser usados juntos no mesmo projeto.