Aula interativa: Layout com CSS Grid

Esta aula é focada em prática.

Você já aprendeu as propriedades básicas do CSS Grid. Agora você vai alterá-las diretamente e observar como os grid items se movem.

O que você vai praticar

grid-template-columns muda a estrutura das colunas.
grid-template-rows muda as alturas explícitas das linhas.
gap adiciona espaço entre células do grid.
grid-column pode fazer um item ocupar várias colunas.
Auto-placement coloca os itens na próxima célula disponível do grid.

Teste o playground interativo

Use os controles para mudar o grid. Observe a prévia e o código CSS atualizarem juntos.

Playground de CSS Grid

Mude a estrutura do grid e observe o auto-placement preencher as próximas células disponíveis.

grid-template-columns

grid-template-rows

gap

0px - 40px

Itens

3 - 8

Primeiro e último item

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background-color: #f1f5f9;
}

.grid-item:first-child,
.grid-item:last-child {
  grid-column: 1 / -1;
}