CSS Плотность автопотока сетки изменяет только поток узких элементов

Question

Моя сетка содержит элементы шириной 1fr и 3fr. Оба элемента имеют одинаковую высоту.

Вот как выглядит сетка с обычным потоком строк:

This is how grid looks with "grid-auto-flow: dense":

As you can observe, the last narrow element moves upwards to fill the gap, but still leaves a gap before the 3fr cell.

This is how I would expect the "grid-auto-flow: dense" to work:

Гипотетический сеточный автопоток: плотное поведение

Есть ли способ сделать так, чтобы широкие элементы grid-auto-flow: dense перекомпоновали так, чтобы полностью избегали пробелов?

Спасибо.

Answer 1

Сетка не может изменить порядок элементов, чем способ. В качестве решения могу предложить небольшую хитрость. Латс согласен, что наш элемент 3fr всегда будет последним в запросе. Так что на этом этапе мы могли бы добавить к нему простую проверку, используя :nth-child()

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  grid-gap: 10px;
  margin-bottom: 100px;
}

.grid>div {
  height: 100px;
  background: #ddd;
}

.three {
  grid-column: 1 / 4;
  grid-row: 1; /* starts form the fist  row gap*/
}

.three:nth-child(4),
.three:nth-child(5),
.three:nth-child(6) {
  grid-row: 2;
}

.three:nth-child(7),
.three:nth-child(8),
.three:nth-child(9),
.three:nth-child(n+9) /* for any element position > 9 */ {
  grid-row: 3;
}

<div class="grid">
    <div></div>
    <div></div>
    <div class="three"></div>
  </div>
  
  <div class="grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="three"></div>
  </div>      
  
  <div class="grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="three"></div>
  </div>