Как подвинуть грид элемент если соседний занимает две строки?

Question

[godsplane]

Пример: https://codepen.io/poylar/pen/bGKOBwy
Я хочу убрать это пустое место в списке, это возможно как то реализовать?То есть я ожидаю что следующие итемы после итема с зазором встанут на место зазора тем самым закрыв его.

Comments

[Вадим]

Мне кажется, в такой конфигурации - нет. У Вас нет "зазора" с точки зрения грида, потому что один из элементов строки занимает много места и поэтому эта строка увеличилась по высоте.
Другое дело, если бы этому элементу было указано занимать три строки, а строки между тем были, например, фиксированного размера.

Например, так:

.block {
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 74px;
  margin-top: 16px;  
}

.item {
  font-size: 4em;
  background: red;
}

.item:nth-last-child(4) {
  grid-row: span 3;
}

Но как истину в последней инстанции этот комментарий воспринимать не стоит

[godsplane]

Вадим, а какие еще варианты даже не с гридами?Мне надо сделать две колонки, только без column: 2, потому что вторая колонка должна появляться только если закончиться место в первой.

[Вадим]

godsplane, Сходу не приходит в голову. Только если пойду и сам начну ковыряться. Мало на гридах что-то делаю.

Но, возможно, Ankhena может подсказать

[Ankhena]

godsplane,

Мне надо сделать две колонки, только без column: 2, потому что вторая колонка должна появляться только если закончиться место в первой.

Так если вы знаете высоту, то задайте флекс по колонкам.

Либо колонками и чем-то типа columns: 200px auto;

[godsplane]

Ankhena, в том то и дело что я не знаю высоту

[Ankhena]

godsplane, это тогда о чем?

только если закончиться место в первой.

В какой момент оно закончится, если мы не ограничили высоту?

[godsplane]

Ankhena, по кол-ву итемов

[Ankhena]

godsplane, не вижу пока вариантов без js или выдачи с бэка в обертках.

Answer 1

[Антон Антон]

Если я правильно понял, что хочется, то это называется grid masonry layout и нигде не поддерживается: https://caniuse.com/?search=masonry
но есть всякие библиотеки на js https://yandex.ru/search/?text=masonry+js

Comments

[godsplane]

ну вообще да, я как то не подумал об этом