Как избавить от пустых мест между картинками?

Question

[mukzer]

Как можно избавиться от пустых мест между картинками, когда часть из них пропадает?
codepen

Comments

[Ankhena]

Думаю, что это ваш же вопрос и в нем есть ответ в комментарии Как прижать элементы к левому верхнему краю?

[mukzer]

Ankhena,
grid-auto-flow: row dense;
Не работает...

[Ankhena]

mukzer, так у вас остались номера колонок в жестком виде, а не через span

[mukzer]

Ankhena, Не совсем понимаю как то что я оберну карточки в span должно мне помочь...

[Максим]

mukzer, grid-gap уберите и всё

[Ankhena]

mukzer, span в данном случае не тег, а способ указать размер ячеек.
Вы указываете, что какой-то элемент занимает 2 колонки и пишете конкретные номера линий. Так элементы никуда не сдвинутся, потому что вынуждены выполнять эти указания.
Если вы укажете вместо этого grid-column: span 2, то они смогут перемещаться на свободное место с помощью dense

[Максим]

Ankhena, span не причём - там grid-gap если его убрать то зазоры между пропадут

[Ankhena]

Максим Ленский, Максим, вопрос про то, чтобы не оставалось пустых мест при удалении каких-то элементов. А не про отступы gap.

[Максим]

Ankhena, там и так их нету - там gap только и всё

[Ankhena]

Максим Ленский, без dense убрали первые 2 элемента - получили в начале пустое место https://jsfiddle.net/esr0jL91/

Со span и dense это место займут другие элементы, подходящие по размеру.

[Максим]

Ankhena, да я понял для чего спан - я про то что там всё расположено без перенносов - ну в общем я подумал что вопрос о расстоянии gap

[Ankhena]

Максим Ленский, да, я согласна, что формулировка вопроса и код к нему так себе :)

[mukzer]

Ankhena, Этот вариант тоже не подходит... https://codepen.io/Mukzer/pen/YzVQMQV

[Ankhena]

mukzer, эмммм... ну хоть немножко самостоятельной логики, пожалуйста
Осталось тоже самое проделать со строками...

[mukzer]

Ankhena, Я просто только начал учить grid и не совсем пойму как правильно это сделать...

[Ankhena]

mukzer, по аналогии со столбцами, через span
https://jsfiddle.net/Ankhena/h95we7ku/

[mukzer]

Ankhena, В вашем примере где всего два вида блоков, нет такой проблемы... У меня немного другого вида галерея, у меня почему-то не работает)

[Ankhena]

mukzer, у меня много терпения, но скоро начну ругаться
Сколько строк и колонок должны занимать элементы нужно задавать только через span, без указания номеров линий начала и конца.

А в вашем коде по-прежнему такое:

&:nth-child(6n + 2) {
            grid-row: span 1;
            grid-column: 3 / span 4;
        }

Ну если вы задаете элементу начнись с 3 линии и займи 4 колонки, как он может взять и перестроиться в другое место?

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

[mukzer]

Ankhena, https://codepen.io/Mukzer/pen/YzVQMQV?editors=1000

[Ankhena]

mukzer, небольшая игра на полчасика, заметно проясняющая работу с гридами https://cssgridgarden.com/#ru

[Ankhena]

mukzer,

grid-column: span 2/ span 3;

просто либо span 2 либо span 3
у grid-column первое значение - число либо имя линии
но вам его не нужно указывать, вам нужно указать только сколько "клеточек" нужно занять

Answer 1

[Aricus]

Думаю, в данном случае лучше использовать не grid, а flexbox. Там все картинки будут в одной последовательности, и при скрытии будут перестраиваться корректно.

Comments

[Ankhena]

Флексами, если убрать один маленький из строки, то второй большой не влезет и будет пустой "квадратик"