Как сделан этот сайт?

Question

[mr jeery]

Сам сайт viktoriamorozova.com
Я только начинаю разбираться в html, css и меня заинтересовала технология на css, которая расставляет фотографии подобным образом без js. Открыл код страницы, сохранил себе на комп, но разобраться не получается, слишком всё запутано.
Можете примерно описать эту технологию или дать пару ссылок, что почитать?
И вообще для веб-разработчиков это нормальная практика разбираться в чужом коде или обычно там черт-ногу-сломит?

Answer 1

[ProTreo]

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Comments

[mr jeery]

Спасибо, почитаю

Answer 2

[zorca]

Да никакой особенной технологии нет, это просто заранее просчитанная сетка, статичная. Скорее всего на PHP в цикле прогоняются все итемы и выстраиваются в нужные пропорции простой проверкой на четность или номер ряда. У широкой фотки класс rk-size-12, у узкой rk-size-6, потом когда две фотки в колонке, то самая обычная вложенность идет. Вообщем ничего особенного и пишется за час.

Comments

[mr jeery]

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

[zorca]

mr jeery, ну она же не меняется при обновлении, то есть то что мы видим статичный HTML, без особых изысков, а как сделано внутри сложно сказать, может PHP, а может и просто ручками написан весь HTML. Можете взять любую сетку на флексах и повторить один в один, единственный нюанс - нужно у всех картинок четко соблюдать пропорции, иначе красота сетки поползет. С чего начать? С ФАЙЛ -> СОХРАНИТЬ КАК и ковыряйте полученное на локалке хоть до посинения. )

[mr jeery]

zorca, Пытаюсь разобраться во flex и возникла трудность. Создал контейнер, который состоит из 4 блоков. Из одного из блоков я создал еще контейнер, встроенный получается, но он не хочет работать, хотя отдельно все ок. Что не так ? Не подскажешь ? https://codepen.io/Jeerjmin/pen/dVqVaK

[zorca]

mr jeery, ну сразу:

1. Привязывать стили к тегам это даже не просто плохая практика, это гавнокод в наше время. Не показывайте такое больше никому.
   
2. Чтобы любая сетка работала, ей нужен контейнер ряда при каждом вложении.
   

Не парьтесь, возьмите любую готовую сетку на флексах, чтобы зря время не тратить: flexboxgrid.com
Ну или тут ознакомьтесь: https://philipwalton.github.io/solved-by-flexbox/d...

Answer 3

[Chronic 86]

https://builtwith.com