CSS Layout e Grid

Construcao de layouts 2D responsivos com abordagem mobile-first.

Flexbox vs Grid

Flexbox

Ideal para alinhamento em uma dimensao.

Grid

Ideal para linhas e colunas simultaneamente.

Grid basico

.layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
}

Grid areas

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "aside main"
    "footer footer";
}

Media queries

Comece no mobile e expanda com @media (min-width: ...).

Mobile-first real

Diretriz: base para telas pequenas, depois escalonamento progressivo.