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

Question

[Overlord934]

Нужно чтобы три элемента( в данном случае изображения по середине) расположились в ряд в одной ячейке грида. Нужно оборачивать эти три элемента в один флекс контейнер или можно по-другому справиться?

Comments

[Ankhena]

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

Отвечая на ваш вопрос: нет, нельзя.
Можно каждое из них прибить к своему краю, но они будут накладываться, если не влезут. Либо задавать им ширину в %.

[Overlord934]

Ankhena, Дело в моей разметке сетки grid. Никак не доходит как разбить на колонки такую галерею где элементы идут хаотично. Принял решение сделать центральную одной большой колонкой и туда уже закинуть элементы, которые должны быть по середике.

.gallery__inner {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr ;
    grid-template-rows: auto;
    gap: 15px;
    
    
}

Не могли бы вы подсказать как правильнее сделать разметку с относительными ед.измерения для такой вот галереи с разными ширинами высотами и разными отступами?

[Ankhena]

Overlord934, нужно нарисовать вертикальные линии по всем "швам" и посчитать количество получившихся столбцов.

Альтернатива это плагины типа isotope.

[robodead]

Overlord934, я бы разбил так


Левая и правая колонка - два flexbox'a с flex-direction: column
Колонка посередине чуть сложнее, но по факту просто три grid'а

В общем могу только пожелать удачи, особенно когда (если) будете адаптировать под мобилки)) )
Надеюсь хоть немного помог мыслями))

[Overlord934]

sewaca, по макету для адаптива эта галерея при уменьшении ширины экрана должна уменьшаться в размерах вот таким образом.Может будут какие-то советы как это реализовать?

[robodead]

Overlord934, это не сложно, просто для каждой картинки установить width: 100% или типа того, чтобы они уменьшались вместе с шириной столбцов
Чтобы сохранялась высота поставьте height: 100%
Ну и чтобы картинка не мылилась, поиграйтесь с object-fit и object-position