Eu sei que existem perguntas semelhantes, mas isso é especificamente perguntar como fazer isso usando o CSS Grid Layout.

Portanto, temos esta configuração básica da grade:

HTML (com barra lateral):

<div class="grid">

  <div class="content">
    <p>content</p>
  </div>

  <div class="sidebar">
    <p>sidebar</p>
  </div>

</div>

CSS:

.grid {
  display: grid;
  grid-template-columns: 1fr 200px;
}

Para criar um layout parecido com este:

| content               | sidebar |

Se a página não tiver uma barra lateral, por exemplo, o html se parece com isso, mas com o mesmo CSS:

HTML (sem barra lateral):

<div class="grid">

  <div class="content">
    <p>content</p>
  </div>

</div>

O layout da página fica assim (traços representam espaço vazio)

| content               | ------- |

Eu sei por que isso acontece, a coluna da grade ainda está definida nogrid-template-columns regra.

Eu só estou querendo saber como dizer à grade que, se não houver conteúdo, preencha o espaço restante semelhante a comoflex-grow trabalha paraflexbox.

O resultado desejado ficaria assim se nenhuma barra lateral estiver presente.

| content                         |