Skip to content

← Trail· Lesson 5 of 9

CSS Grid for layouts

Build responsive grids with repeat and minmax.

TODO i18n: Full body translation pending. Title and description are localized; the body below remains in Portuguese for now.

Grid controla linhas e colunas:

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

Essa fórmula sozinha já resolve muitas galerias e listagens.

Combine com media queries quando o layout precisar mudar de estrutura (ex.: sidebar).

Exemplos: Galeria Grid e Cards responsivos.

Practice