CSS-сетка заполняет пространство, когда ничего нет

Question

У меня есть компоновка сетки css, которая состоит из двух столбцов и двух строк:

"заголовок заголовка" "влево вправо"

Таким образом, заголовок всегда заполнен на 100% и влево и вправонужно разделить их ряд равномерно.

Существует также возможность "левого" не получить рендеринга.То, что я пытаюсь сделать, это "правильно" заполнить весь ряд, когда он один.

.grid {
  display: grid;
  grid-template: 
          "header header" 
          "left right";
  grid-template-columns: 1fr 1fr;
  margin-bottom: 50px;
}

header {
  grid-area: header;
  background: #0098db;
}

.left-stuff {
  grid-area: left;
  background: #ffadad;
}

.right-stuff {
  grid-area: right;
  background: #73d073;
}

<!-- example with header and two columns -->
<div class="grid">
  <header>
    <h1>I'm the header</h1>
  </header>
  <div class="left-stuff">I'm the left stuff</div>
  <div class="right-stuff">I'm the right stuff</div>
</div>

<!-- example with header and one column -->
<div class="grid">
  <header>
    <h1>I'm the header</h1>
  </header>
  <div class="right-stuff">I'm the right stuff</div>
</div>

Я попробовал следующее:

grid-template-columns: auto 1fr;
grid-template-columns: 1fr auto;
grid-template-columns: 1fr auto;
grid-template-columns: 1fr;
grid-template-columns: 50% 50%;

, но они не отвечают требованиям обоих сценариев.Это возможно с сеткой CSS?

Answer 1

Это невозможно сделать с помощью сетки, потому что во всех ваших сценариях создаются два столбца. И с двумя столбцами, нет никакого CSS-метода для автоматического переключения столбца на span 2, когда брат или сестра исчезают. Это потребует сценария.

Возможно, вы захотите использовать неявные, а не явные столбцы. Это может привести к решению. Посмотрите здесь:

• Сетка CSS: как сделать ширину столбца полной, когда второго столбца нет?

В противном случае, рассмотрите изгиб вместо сетки. Решение с помощью flex относительно просто, потому что нет « направляющих стенок », разделяющих линии flex. Это позволяет гибким элементам иметь доступ к полной строке.

.grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

header {
  flex: 0 0 100%;  /* consume all space; force siblings to next line */
  background: #0098db;
}

.left-stuff {
  flex: 1;         /* consume all free space; share space with other flex: 1 siblings */
  background: #ffadad;
}

.right-stuff {
  flex: 1;
  background: #73d073;
}

<!-- example with header and two columns -->
<div class="grid">
  <header>
    <h1>I'm the header</h1>
  </header>
  <div class="left-stuff">I'm the left stuff</div>
  <div class="right-stuff">I'm the right stuff</div>
</div>

<!-- example with header and one column -->
<div class="grid">
  <header>
    <h1>I'm the header</h1>
  </header>
  <div class="right-stuff">I'm the right stuff</div>
</div>