Как сверстать это?

Question

[Proko]

Правильно ли я сверстал это и как бы сделали вы?

Comments

[Антон Литвиненко]

неправильно

[Proko]

Антон Литвиненко, почему? И как правильно?

[Антон Литвиненко]

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

[Ankhena]

Proko, Нет. Вы нарушили пропорции картинок. Например, исходник 900х600, а вы задаете 200х100. Это же совсем разное соотношение сторон.

И есть сомнения по поводу горизонтальных отступов зеленого блока. Но тут нужно видеть весь макет.

Ещё есть нюансы семантики. Точнее, у вас она отсутствует совсем.

[Proko]

Ankhena, Антон Литвиненко, я не придал этому значения, может быть зря. Тут скорее вопрос про то, правильно ли я позиционировал, мне надо было это написать.
Я видел это так, что либо надо между каждым рядом ставить br (хотя мне это решение не нравится, для позиционирования CSS же), либо ограничивать ширину div.photos так, чтобы он вмещал только два блока .photo с их отступами.

Но если бы я оставлял display: block для div.photos и ограничивал его по ширине, пришлось бы блокам .photo делать display: inline-block. Но тогда max-width 520px не работало бы, ведь между инлайн блоками невидимые отступы, которые превышают max-width, и чтобы их убрать пришлось бы делать font-size: 0. Но всё равно если уменьшить margin до 10px у .photo, блоки будут слева и придётся снова высчитывать max-width, и только justify-content: center для флексов может это исправить, так что флексы тут выглядят лучше.

Про семантику не знаю, хотите сказать для них лучше элемент figure даже без figcaption?

[Ankhena]

Proko, думаю, вам понравятся гриды и gap.
Впрочем, для флексов gap тоже работает, хоть и с чуть меньшей поддержкой.

[Одиночка Айс]

Ankhena, про гапы в флексах - а потом клиент с айфоном: ой, а где отступ между блоками?

[Ankhena]

Одиночка Айс, с 6кой, да, может быть ой.
И вроде я написала, что поддержка меньше.

[ForSureN1]

Одиночка Айс, в целом флексовые гапы поддерживаются с версии 14.1, которая вышла в 2021, риск конечно есть, но все же. Однако у меня была ситуация, когда один из универов Великобритании заказали проект, я его полностью сделал на флексовых гапах, и получилось так, что у единственного человека который как то относится к проекту, оказался с старинным макбуком, и отступов соответственно он не наблюдал нигде, благо все делал с умом, и заняло совсем немного времени переписать с флексов на гриды, поэтому после этого я лучше пока еще подожду пару лет, прежде чем опять воспользуюсь флексовыми гапами :)

[ForSureN1]

Ankhena, Поддержка между гридами и флексами (относительно гапов) колоссальная, для гридов версия 10.1 (вышла в 2017), а для флексов только с 2021 :(

[Ankhena]

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

[ForSureN1]

Ankhena, Тегнул только потому, что вы написали "чуть меньшей" поддержкой, когда дела обстоят совсем иначе

Answer 1

[sharpsss]

В общий контейнер помещаешь ,который:
display:flex;
flex-direction:column;
затем вот эти вот картинки в div который:
display:flex;
flex-direction:row;
какой нибудь id для картинки вокруг которой должен быть border ну и всё в принципе , погугли gap ещё и готово , сверстал фул не правильно - отличается жёстко