Posicionar itens: linhas, span e áreas

As linhas da grade

Aqui está a confusão número um do Grid: conta-se as linhas, não as células. Uma grade de N colunas tem N+1 linhas verticais, numeradas a partir de 1. Três colunas são delimitadas pelas linhas 1, 2, 3 e 4 (quatro linhas para três vãos, como os postes de uma cerca). Um item é posicionado indicando entre quais linhas ele começa e termina.

.destaque {
  grid-column: 1 / 3;   /* da linha 1 até a linha 3: ocupa 2 colunas */
  grid-row: 1 / 2;      /* da linha 1 até a linha 2: uma linha */
}

span: ocupar várias células

Se você não quer contar linhas, use a palavra-chave span para indicar quantas faixas ocupar a partir de onde o item começa:

.destaque {
  grid-column: span 2;  /* ocupa 2 colunas, comece onde começar */
  grid-row: span 2;     /* e 2 linhas */
}

Isso é perfeito para aquela "foto em destaque" que ocupa metade da galeria, sem te prender a posições específicas: se você reordenar os cartões, o destaque continua com seu tamanho sem que você mexa em números de linha.

⚠️ PEGADINHA CLÁSSICA: span 2 não é "ir até a linha 2", é "ocupar 2 faixas". Se você misturar grid-column: 2 / span 2, ele conta a partir da linha 2 e avança 2 vagas. Não confunda o número da linha com o número de células a ocupar.

Áreas nomeadas: o layout visual

A forma mais legível de montar uma página é desenhá-la com grid-template-areas. Você define a grade como um "mapa" de nomes e depois atribui cada item à sua zona com grid-area:

.pagina {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "cabecalho cabecalho"
    "menu      conteudo"
    "rodape    rodape";
  gap: 12px;
}

.cabecalho { grid-area: cabecalho; }
.menu      { grid-area: menu; }
.conteudo  { grid-area: conteudo; }
.rodape    { grid-area: rodape; }

O nome repetido (cabecalho cabecalho) faz com que essa zona abranja várias colunas. Um ponto (.) deixa uma célula vazia. A grande vantagem: o CSS se lê como um desenho em ASCII da página, e para mudar todo o layout você só reescreve o mapa.

⚠️ PEGADINHA CLÁSSICA: o "mapa" precisa ser um retângulo perfeito. Todas as linhas precisam do mesmo número de colunas e cada área deve formar um bloco retangular (nada de zonas em formato de L). Se uma linha tiver um nome a menos, a regra inteira é ignorada em silêncio e você enlouquece procurando o erro.