display-grid: a propriedade que supera flex-box em tudo...

O Grid resolve isso porque, ao contrário do Flexbox, que trabalha em uma única dimensão (linha ou coluna, nunca as duas ao mesmo tempo), ele controla linhas e colunas simultaneamente. Isso abre a possibilidade de diminuir, esticar, encolher e posicionar elementos exatamente onde você quiser dentro da grade, com uma precisão que antes só se conseguia com bastante paciência e um pouco de sorte.

A base disso é definir a grade com grid-template-columns e grid-template-rows, o que já cria um layout granular sem a necessidade de aninhar containers flexíveis uns dentro dos outros:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 16px;
}

Com isso, cada coluna já nasce proporcional às outras, e ajustar o tamanho de um item específico é tão simples quanto aplicar grid-column: span 1; nele, sem que isso afete o restante do layout. É quase engraçado pensar em quanto tempo se gastava tentando simular esse comportamento com truques de flex-basis.

O ponto alto, no entanto, é o grid-template-areas, que permite desenhar o layout usando nomes, como se fosse um mapa da página escrito diretamente no CSS:

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

Basta olhar para essas linhas para entender a estrutura da página inteira, o que é uma forma bastante elegante de documentar o próprio layout enquanto se escreve o código.

Onde essa abordagem realmente se torna irônica é na hora de montar uma versão mobile. Quem já tentou reordenar elementos para telas pequenas usando Flexbox sabe que muitas vezes é preciso recorrer a divs extras só para conseguir alinhar algo do jeito certo, ou então apelar para position: absolute e ficar ajustando top e left na marra até a página parar de quebrar. Com Grid, basta redefinir o grid-template-areas dentro de uma media query, e os elementos simplesmente se movem para a nova posição, sem alterar uma linha sequer do HTML:

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }
}

Enfim..., não se trata de escolher um lado numa rivalidade entre Grid e Flexbox, por mais que seja tentador tratar isso como uma disputa. O Flexbox continua sendo bom para alinhar itens em fila, como uma barra de navegação ou uma lista de botões, enquanto o Grid assume o protagonismo quando o assunto é a estrutura geral da página. A ironia é que, depois de anos resolvendo tudo com truques e gambiarras, a solução mais elegante estava ali o tempo todo, esperando alguém parar de reinventar a roda.