ю, что есть похожие вопросы, но здесь конкретно спрашивают, как это сделать с помощью CSS Grid Layout.

Итак, у нас есть эта базовая настройка сетки:

HTML (с боковой панелью):

<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;
}

Чтобы создать макет, который выглядит примерно так:

| content               | sidebar |

Если страница не имеет боковой панели, то есть. HTML выглядит так, но с тем же CSS:

HTML (без боковой панели):

<div class="grid">

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

</div>

Макет страницы выглядит следующим образом (черточки обозначают пустое пространство)

| content               | ------- |

Я знаю, почему это так, столбец сетки по-прежнему определяется вgrid-template-columns править.

Мне просто интересно, как сказать сетке, что если контента нет, то заполняем оставшееся место какflex-grow работает наflexbox.

Желаемый результат будет выглядеть так, если нет боковой панели.

| content                         |