css grid создает пустые столбцы с автозаполнением

Question

Фрагмент должен проиллюстрировать это довольно хорошо, но вот что я пытаюсь достичь:

Я хочу, чтобы мой первый ряд был grid-column: 1/-1, чтобы он охватывал сетку. Этот первый ряд не всегда будет присутствовать.

Дополнительные столбцы в сетке должны быть grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); Я не знаю, сколько их будет в любой момент времени.

Вот проблема: Когда присутствует охватывающий ряд , следующие столбцы ведут себя как auto-fill, , а не auto-fit. Фрагмент показывает, как присутствие связующего столбца изменяет поведение последующих столбцов. На снимке экрана показаны создаваемые дополнительные столбцы.

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

Любой совет будет оценен. Спасибо!

* {
  box-sizing: border-box;
}

.box__title {
  grid-column: 1 / -1;
}

.box > * {
  border: 1px solid gray;
  padding: 20px;
  margin: 0;
  background: white;
}

.box {
  border: 1px solid gray;
  background: #efefef;
  padding: 20px;
  margin: 20px;
  display: grid;
  grid-template-rows: auto;
  grid-gap: 20px;
}

.box--fit-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.box--fill-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.box--grid > * {
  border: 1px solid gray;
  padding: 20px;
  margin: 0;
}

<div class="box box--fit-grid">
  <h2 class="box__title">The top two boxes should use auto-fit</h2>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
  <div> asdf sadf sa dfsa dfLorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
</div>

<div class="box box--fit-grid">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
</div>

<div class="box box--fill-grid">
  <h2 class="box__title">The bottom two boxes should use auto-fill</h2>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
  <div> asdf sadf sa dfsa dfLorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
</div>

<div class="box box--fill-grid">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
</div>

Answer 1

При использовании auto-fit или auto-fill контейнер учитывается во всех элементах сетки.

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

Затем вы устанавливаете свой первый ряд на:

.box__title {
  grid-column: 1 / -1;
}

Это фиксирует четыре столбца. В результате auto-fit не может растянуть три последовательных элемента в строке, поскольку четвертый столбец не сворачивается.

Без первого элемента и правила grid-column: 1 / -1 есть только три столбца, и auto-fit / auto-fill работают как положено.

Но, может быть, вам не нужны auto-fit или auto-fill. Алгоритм автоматического размещения сетки может быть достаточно для выполнения этой работы.

.box__title {
  grid-column: 1 / -1;
}

.box--fit-grid {
  grid-template-columns: repeat(3, minmax(250px, 1fr));
}

.box {
  border: 1px solid gray;
  background: #efefef;
  padding: 20px;
  margin: 20px;
  display: grid;
  grid-template-rows: auto;
  grid-gap: 20px;
}

.box>* {
  border: 1px solid gray;
  padding: 20px;
  margin: 0;
  background: white;
}

.box--grid>* {
  border: 1px solid gray;
  padding: 20px;
  margin: 0;
}

* {
  box-sizing: border-box;
}

<div class="box box--fit-grid">
  <h2 class="box__title">The top two boxes should use auto-fit</h2>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
  <div> asdf sadf sa dfsa dfLorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
    doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
    doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
    doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
    doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
    doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
    doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
    doloremque. Blanditiis.</div>
</div>

jsFiddle demo

Дополнительная информация:

• В чем разница между автоматическим заполнением и автоматическим заполнением?