Как сверстать такой блок?

Question

[Lolka21]

Приветствую, нужно сделать 3 колонки, в каждой ячейке будет фотка разного размера, нужно что бы ячейка подстраивалась под фото...
пытаюсь через css grid "grid-template-columns: auto auto auto;" сделать, но ячейки получаются одинакового размера, просто 100%/3, а мне нужно что бы ширина была как у фото

вот сам блок

Answer 1

[Михаил Р.]

Если Вы хотите, чтобы размеры ячеек были определены исключительно размерами изображений, то гриды не лучший вариант, а вот флексы - да. Для заполнение колонки изображением, использовал object-fit (contain/cover).


Если задача будет еще сложнее, то лучше использовать masonry grid, например https://masonry.desandro.com/ .

Comments

[Lolka21]

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

[Михаил Р.]

Lolka21,

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

Картинки в любом случае будут подгружаться из бэка, здесь лишь вопрос, с чьего бэка ;) В моем примере, они подгружаются с сервиса imgholder.ru, который генерирует их на бэке и отдает по get запросу.

не составит ли такая разметка проблем при бэкэнде ?

Нет, это обычный html+css, в flex+object-fit исполнение, оба держут большинство относительно современных браузеров:
https://caniuse.com/flexbox
https://caniuse.com/object-fit

[Владимир Коротенко]

Михаил Р. насколько я понял автор хотел что бы не было строк и блоки выкладывались по порядку.
Lolka21 так?

[Lolka21]

Владимир Коротенко, мне как бы все равно, я верстаю

но вопрос был не составит ли труда программисту, генерировать каждую строку и туда ставить по 3 элемента ?)

[Владимир Коротенко]

Lolka21, не вопрос просто как вы будете забивать эти строки.

[Lolka21]

Владимир Коротенко, не совсем понял... в смысле как я буду забивать строки ?

[Владимир Коротенко]

Lolka21 смотрите у вас есть 90 картинок
ваша задача их впихать в контейнер.

Первый вариант просто воткнуть все и пусть браузер их расставляет.
Второй разбивать их по строкам вам

Answer 2

[Владимир Коротенко]

Comments

[Михаил Р.]

inline, important, Вы серьезно?

[Владимир Коротенко]

Михаил Р., Быстрый грязный код. А чем вам инлайн не нравится?

[Михаил Р.]

Владимир Коротенко,

Быстрый грязный код

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

А чем вам инлайн не нравится?

Ну не в 2023 же, а то там и до float-ов недалеко... ;) Для сеток общепринятая практика, это - flex и grid layot.

Answer 3

[Владислав Лысков]

как я понял тебе нужно что-то такое
https://codepen.io/Vlatqa/pen/oNJwWQK