Как на странице вывести блоки по типу мозайки, который используется в галереях фото

Как на странице вывести блоки по типу мозайки, который используется в галереях фото

Для создания эффекта мозаики (masonry), как в Pinterest или фотогалереях, лучше всего использовать CSS-свойство column-count.

Это самый легкий и надежный способ, который не требует подключения JavaScript-библиотек и отлично работает на обычном шаред-хостинге WordPress.

пример кода:

/* Контейнер списка комментариев */
.wpd-thread-list {
    column-count: 3; /* Количество колонок на больших экранах */
    column-gap: 20px; /* Расстояние между колонками */
}

/* Отдельный блок комментария */
.wpd-comment {
    break-inside: avoid; /* Запрещает разрыв комментария между колонками */
    page-break-inside: avoid; /* Для совместимости со старыми браузерами */
    margin-bottom: 20px; /* Отступ снизу между карточками */
    
    /* Опциональные стили для эффекта карточки (можно убрать или изменить под дизайн сайта) */
    background: #ffffff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Адаптивность для планшетов (2 колонки) */
@media (max-width: 992px) {
    .wpd-thread-list {
        column-count: 2;
    }
}

/* Адаптивность для мобильных устройств (1 колонка) */
@media (max-width: 600px) {
    .wpd-thread-list {
        column-count: 1;
    }
}