Як вирівняти блоки в стилі Pinterest-style (або Masonry) на чистому CSS

Сучасне розташування елементів списку, блоків, зображень які мають різні пропорції, у вигляді колонок з елоементами разними по висоті, до прикладу як на сайті Pinterest без участі JavaScript.

Найкращий і найпростіший варіант зробити це через CSS, який виглядає як Masonry, але працює набагато швидше. Для цього використаємо column-count, що створить ефект колонок різної висоти, як у Pinterest.

<?php $style = "
.usegall-grid {
column-count: 3; /* Кількість колонок для ПК */
column-gap: 15px;
width: 100%;
}
.usegall-item {
display: inline-block; /* Важливо для Masonry */
width: 100%;
margin-bottom: 15px;
break-inside: avoid; /* Запобігає розриву картинки між колонками */
}
.usegall-item img {
width: 100%;
height: auto; /* Зберігаємо пропорції */
border-radius: 8px;
transition: 0.3s;
cursor: pointer;
display: block;
}
/* Адаптація для планшетів */
@media (max-width: 992px) {
.usegall-grid { column-count: 2; }
}
/* Адаптація для телефонів */
@media (max-width: 576px) {
.usegall-grid { column-count: 1; }
}
"; ?>

У циклі foreach, який виводить масив зображень не потрібно примусово задавати висоту, щоб не "ламати" Pinterest-ефект:

<div class="usegall-grid">
<?php foreach ($images as $index => $img) : ?>
<?php $src = $img->folder . '/' . htmlspecialchars($img->name, ENT_COMPAT, 'UTF-8'); ?>
<div class="usegall-item">
<img src="/<?php echo $src; ?>" data-alt="<?php echo htmlspecialchars($img->name); ?>" style="width: 100%; height: auto;">
</div>
<?php endforeach; ?>
</div>

Чому ми використали column-count замість JS?

  1. Продуктивність: Це чистий CSS. Браузеру не потрібно чекати завантаження всіх картинок, щоб розрахувати їх координати (як це робить Masonry.js).
  2. Швидкість для мобільних: Твій сайт покаже галерею миттєво, а не чекатиме виконання скриптів.
  3. Порядок: Фото будуть йти зверху вниз по колонках. Це виглядає дуже професійно.

Маленький нюанс:

Якщо ти хочеш, щоб фото йшли строго зліва направо в рядах (а не по колонках), але мали різну висоту — це вже складніша логіка Flexbox Masonry. Але для "ефекту Pinterest" column-count — це ідеальний і найшвидший варіант.