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

Question

[Влад]

Каждое фото – отдельный самостоятельный элемент. Заказчик должен иметь возможность эти фотки изменять через cms-ку при необходимости ))

Какую технологию выбрали бы вы?
На гридах? На флексах? Как задавать размеры картинок, чтобы это всё тянулось?
Или в relative контейнере фотки раскидать по сторонам и не мучиться?
А как же проблема размерности?
Изначально исходим из Full HD контейнера для макета.
Затем уменьшаем всё это.
В фотках background-size: cover; нужно устанавливать, потому что мало ли, что он там загрузит.
Ну а дальше замучаешься писать медиазапросы для размеров.
Как бы это сделать так, чтобы вся эта гирлянда сама сжималась и разжималась?
На словах поделитесь как бы вы сверстали это.
Короче, запутался немного.

Comments

[Ankhena]

Как бы это сделать так, чтобы вся эта гирлянда сама сжималась и разжималась?

Использовать относительные единицы измерения.
%, vw, fr
Можно в связке с clamp (ну или min, max).

И всё это гридом, как нарисовал Сергей.

[Влад]

Ankhena, а если без грида, то раскидать картинки с помощью абсолютного позиционирования в рамках обертки с position:relative и относительных единиц, ну и background-size: cover на них? Так норм будет? Гридов боюсь я пока. Статистика до сих пор не сильно впечатляет https://caniuse.com/?search=grid

[Ankhena]

Влад, это же, наверное, всё таки галерея с контентными картинками? Если украшения, то да, фонами.

Я считаю, что абсолютов лучше избегать, если задача решается без них.
Тем более, что с гридами всё равно имеет смысл разобраться. Чем не повод?

[Влад]

Ankhena, да разобраться в них не сложно. Я на caniuse выше ссылку давал.

[Ankhena]

Влад, на проде больше года использую, если ие не нужен.

[Влад]

Ankhena, ну не знаю. Всё таки поддержка Chrome for Android в релизе с 1-го февраля сегодня года как-то смущает.

[Ankhena]

Влад, там все норм

[Влад]

Как то тяжко мозгам с гридов на флексы туда сюда переключаться. Вообще по другому голова должна работать. Тоже самое как с Реакта на натив. Сидишь такой месяц на Реакте клепаешь, а потом бамс по нативу задача прилетает или не дай Боже по джейквери ))

[Влад]

Ankhena, Когда в гридах вешаешь на контейнер гэпы и колонки задаёшь в процентах, то правило box-sizing: border-box; не работает оказывается? А как тогда быть? Высчитывать и вычитать что-ли эти гэпы? Это какой-то гимор. Не может такого быть. Есть какой-то способ?

grid-template-columns: calc(42%-15px) calc(19%-15px) calc(22%-15px) 17%;

[Ankhena]

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

[Влад]

Ankhena, осваиваю css grid и хочу добиться результата как на примере.
Целый час просидел и пока и получилось вот такая кракозябрина https://codepen.io/vlad-tarasoffka/pen/NWwmXdv
И ещё хочу добиться резиновости ))

[Ankhena]

Влад, сначала нужно вспомнить школу.
Все % дают в сумме 100 - норм.
Из трех колонок вы вычитаете по 15px.
Хорошо.
Т.е. на отступы остается 45px.

Но потом вы вдруг пишете, что gap 30px.
Ну и как эти 90 должны влезть в оставшиеся 45?

Но разумно перестать извращаться с calc и % и использовать единицы fr

[Ankhena]

Влад, clamp от балды поставила
https://codepen.io/AnnaSummer/pen/RwjOxXV

[Влад]

Ankhena, да причем здесь школа? я же говорю, что делаю это потому что наблюдаю картину, что box-sizing: border-box; с гридами не дружит в плане gap

[Влад]

Блин, с fr действительно тоже работает без всяких calc ) А чтобы поджать картинки снизу что нужно сделать?

[Ankhena]

Влад,

да причем здесь школа?

Ну при том, что сумма всех блоков + отступы должны помещаться в 100%. А у вас не помещались.

[Влад]

Ankhena, ок, я уже на с fr подружился )) гляньте, пожалуйста, что здесь не так - https://codepen.io/vlad-tarasoffka/pen/NWwmXdv

[Ankhena]

Влад, картинки не адаптивны

[Влад]

Ankhena, да дело не в этом, о адаптивности пока рано говорить. Ничего не стоит добавить

img {
   width: 100%;
}

Я не понимаю почему происходит вот это:


Каким образом сделать так, чтобы высоты ячейки равнялась высоту картинки?
Такие свойства для основного контейнера тоже ничего не дают:

grid-auto-rows: auto;
grid-auto-columns: auto;

Вот это свойство для айтема
align-self: start;
подтягивает ячейки, но в целом картина не меняется.

В чём тут дело?

[Ankhena]

Влад,

Я не понимаю почему происходит вот это:

Потому что вы сказали браузеру, что вам нужно 5 строк одинаковой высоты..

https://developer.mozilla.org/ru/docs/Web/CSS/grid...

[Влад]

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

[Ankhena]

Влад, ждать aspect-ratio или использовать хак с паддингом или единицы vw, если сможете посчитать.

[Влад]

Ankhena, новоиспечённое свойство aspect-ratio для контейнеров с изображениями проблему не решает :( с хакпаддингом будет такая же картина. Контейнеры подстроились под изображение, но сетка всё равно не встала на место. Видимо какое-то влияние оказывают пустые ячейки что ли.
Что делать с пустой ячейкой .item_3 ?

Вот – https://codepen.io/vlad-tarasoffka/pen/NWwmXdv

[Ankhena]

Влад,

новоиспечённое свойство aspect-ratio для контейнеров с изображениями проблему не решает

В смысле не решает? Видно же, что решает.
Но вы потеряли display inline-block и vertical-align, которые я вам дописала в код, чтобы не было пробела.
И про object-fit и всё такое, чтобы картинка растягивалась по ячейке.

Что делать с пустой ячейкой .item_3 ?

В макете там пусто ;)
Не знаю, зачем вам в ней item.

[Влад]

Ankhena, от души с праздником вас, коллега

1) Искренне не понимаю зачем здесь display inline-block, а vertical-align вообще работает только на таблицах.
Добавил их в общий класс айтемов .item и толку ноль.

2) А куда же мне без пустой ячейки .item_3, ведь она же создаёт отступ.

P.S. никак не думал, что я буду 2 вечера css grid осваивать
Это вы меня, коллега, склонили гриды освоить, теперь помогите мне разобраться, пожалуйста

[Ankhena]

Влад,

Искренне не понимаю зачем здесь display inline-block, а vertical-align вообще работает только на таблицах.

Это неверно.
Раз­би­ра­ем­ся с vertical-align
А нужно для того, чтобы не было пробела после картинок.

Если вы посмотрите мою песочницу, то увидите, что я эти свойства задаю картинке, а не итему.

2) А куда же мне без пустой ячейки .item_3, ведь она же создаёт отступ.

Ну и пусть себе задает.
div в неё зачем складывать?
По идее должно быть достаточно пропорций у блоков с картинками.
Если почему-то нет и нужно прямо ему задавать aspect-ratio, то имеет смысл заменить его на псевдо от большого блока и убрать рамки.

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

Небольшая игрушка по гридам: https://cssgridgarden.com/#ru

от души с праздником вас, коллега

Спасибо, мне приятно :)

[Влад]

Ankhena,

Это неверно.
Раз­би­ра­ем­ся с vertical-align
А нужно для того, чтобы не было пробела после картинок.

Спасибо, убрал этот пробел.

Если вы посмотрите мою песочницу, то увидите, что я эти свойства задаю картинке, а не итему.

Забыл предупредить, что я осознанно не смотрел ваш форк в песочнице. Когда сам мучаешься и задаёшь вопросы, то потом из головы ничем не вытравишь )

По идее должно быть достаточно пропорций у блоков с картинками.
Если почему-то нет и нужно прямо ему задавать aspect-ratio, ...

В связи с этим вопрос. Как правильно высчитывать количество фракций в макете, когда между блоками присутствует gap? Что-то у меня немного кривоватенько получается, не понимаю почему. Ещё бесят множество цифр после десятичной запятой. По идее не нужен никакой паддинг хук, должно и так вставать всё на свои места. Но встаёт с небольшими косяками.

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

Что вы имели в виду?

Небольшая игрушка по гридам: https://cssgridgarden.com/#ru

Вчера увидел и поиграл. Но там не всё, то что нам здесь нужно ))

Со второго вечера с вашей помощью начинаю врубаться в гриды
А то всё на флексах, да на флексах ))

[Ankhena]

Влад,

Забыл предупредить, что я осознанно не смотрел ваш форк в песочнице. Когда сам мучаешься и задаёшь вопросы, то потом из головы ничем не вытравишь )

Думаю, имеет смысл посмотреть.

Как правильно высчитывать количество фракций в макете, когда между блоками присутствует gap?

Точно также, в долях от оставшегося пространства.

Что вы имели в виду?

Пустые блоки в разметке оправданы очень редко. Например, блок подготовленный для выдачи в него результата с помощью скрипта. Или при очень затейливом дизайне, когда двух псевдоэлементов не хватает.
В данном случае в той ячейке должно быть либо просто пусто либо можно поместить туда псевдоэлемент.

[Влад]

Точно также, в долях от оставшегося пространства.

Т. е. фракции рассчитывать без учёта гэпов? Т.е. в сумме их не будет 100?

поместить туда псевдоэлемент.

Зачем он там нужен? Ума не приложу. Пустая ячейка да и все.

[Влад]

Всё, я врубился как правильно рассчитывать фракции. А по поводу псевдоэлемента не понял что вы имели в виду.

Answer 1

[Сергей delphinpro]

В простейшем случае попилили всё на ячейки и сделали на гридах.



Остальное зависит от дополнительных условий.