O CSS Grid Layout revolucionou a forma como criamos estruturas bidimensionais na web. Com poucas linhas de código, é possível criar uma galeria de cards que se adapta a qualquer tamanho de tela sem precisar de centenas de Media Queries.
1. O Poder do auto-fill e minmax
A combinação das propriedades repeat(), auto-fill e minmax() calcula automaticamente quantas colunas cabem na tela dinamicamente.
Passo 1: Estrutura Base do Grid
Defina o container como grid e estabeleça o tamanho mínimo ideal para os seus cards internos.
.galeria-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}2. Flexibilidade Garantida
A unidade 1fr garante que o espaço restante seja distribuído igualmente, evitando espaços vazios nas laterais da tela.