Masonry blocks · 4 пункти
Ця сторінка — частина бібліотеки елементів для статей OnLady. Тут — чотири masonry-композиції, які поєднують кілька зображень у прямокутну композицію з фіксованими пропорціями.
На відміну від простих img-pair чи img-wide-three, masonry-блоки використовують вертикальні spans і нерівні колонки — кожне фото отримує власне візуальне "вагу". Це дозволяє говорити з читачем не просто "ось три фотографії", а "ось одне головне і два допоміжні", "ось симетричний триптих", "ось п'ять кутиків однієї історії".
Усі чотири блоки сидять у тирі .col-rail — це їхній рідний контейнер. На вузьких в'юпортах тир згортається до .col-wide, але самі grid-композиції зберігають свою структуру (gap між коміркaми лише міняється). Жодного JavaScript — лише CSS grid + aspect-ratio.
Між блоками залишено placeholder-абзаци, щоб ви бачили, як кожна композиція дихає в потоці прози. Якщо вам потрібна п'ята композиція — спершу подумайте, чи це справді нова, а не варіант одного з нижче. Жорсткий набір краще за розрослі варіації.
01Masonry-1 — Square + Two
Квадратний герой ліворуч у парі з двома складеними landscape-мініатюрами праворуч. Корисний, коли одне домінантне фото потребує допоміжних деталей-кадрів — наприклад, основний look + два детальні кадри тканини.
Геометрія: 1:1 квадрат на дві рядки + 4:3 × 2 у стовпчик. Загальне співвідношення блока — 5 / 3.
.col-rail · Masonry-1 (1:1 + 4:3 × 2 → 5 : 3 block)
Працює також як "обкладинка серії" — велике квадратне фото має бути найкращим з усього доступного матеріалу, бо око зачепиться саме за нього.
02Masonry-2 — Big-Left 1+2 Stack
Класичний редакційний / магазинний грід: одне велике landscape-фото займає ліву частину, два менші landscape-кадри стоплено праворуч. Усі три — 4:3, що дає композиції візуальну спокійність.
Працює як універсальний "три кадри з однієї зйомки": шеф-кадр + 2 деталі, look-of-the-day + 2 ракурси, тощо.
.col-rail · Masonry-2 (4:3 + 4:3 × 2 → 2 : 1 block)
Загальне співвідношення блока — 2:1, тож він не "поглинає" вертикальний простір сторінки агресивно. Можна вставляти декілька раз поспіль (з абзацами між ними), не ризикуючи зробити статтю одною суцільною галереєю.
03Masonry-3 — Portrait Flanked
Симетрична композиція: два вузькі портретні фото фланкують центральний квадрат. Читається як "основний look + детальні close-ups" — outfit-фото в обрамленні двох крупних планів.
Геометрія: 1:2 + 1:1 + 1:2 в один рядок. Загальне співвідношення блока — 2:1, як у Masonry-2, але з зовсім іншим візуальним відчуттям.
.col-rail · Masonry-3 (1:2 + 1:1 + 1:2 → 2 : 1 block)
Найкраще працює, коли всі три фото пов'язані темою або кольоровою гамою — інакше симетрія перетворюється на "три випадкові фото поряд", що зорово диссонує.
04Masonry-4 — Corners + Center (5 photos)
Найважчий з чотирьох блоків. Чотири портрети 3:4 — у кожному з кутів; високий 2:3 портрет займає повну висоту в центральній колонці. Працює як section-opener або look-of-the-day spotlight.
Геометрія: 9fr 16fr 9fr колонки, 2 рядки. DOM-порядок: A (col1, row1), C (mc-main, col2, span 2 rows), B (col3, row1), D (col1, row2), E (col3, row2). Загальне співвідношення — 17:12.
.col-rail · Masonry-4 (3:4 × 4 corners + 2:3 center → 17 : 12 block)
Через свій масштаб masonry-4 — одноразовий блок: не більше одного на статтю, інакше вони починають "переважувати" текст. Якщо потрібно більше п'яти фото в одному "моменті", переходьте до photo-grid з лайтбоксом.
05Підсумок
Чотири masonry-композиції покривають типові потреби fashion-статей: один герой + допоміжні, симетричний триптих, та повноцінний section-opener на п'ять фото. Усі — pure-CSS grid; жодного javascript-плагіну, жодних "masonry-libraries", жодних layout-shifts.
Усі ці композиції — це жорсткі фігури з заданими aspect-ratio. Якщо ваше фото має зовсім інші пропорції — кадруйте його під 1:1, 3:4, 4:3 або 2:3, перш ніж вставляти в masonry-блок. Якщо це неможливо — використайте простий photo-figure або img-pair.
Жорсткість тут навмисна: вона зберігає візуальну консистентність між статтями. Читач, який гортав вчора лукбук на Masonry-2, сьогодні впізнає той самий ритм у новій статті — і це збільшує trust до бренду.