@klekovkinandrey

Как сделать галерею на css по типу Masonry?

Сделал таким макаром
.gallery.gallery-columns-3 {
  -webkit-column-count: 4;
  /* Chrome, Safari, Opera */
  -moz-column-count: 4;
  /* Firefox */
  column-count: 4;
}


но проблемка в том, что itemы идут сверху вниз
а нужно слева направо
  • Вопрос задан
  • 182 просмотра
Решения вопроса 1
@StepsOnes
Используя свойство `column-count` вы можете создавать многостолбцовые макеты (как в Masonry). Однако, по умолчанию, все элементы будут заполняться сверху вниз, а затем слева направо. Чтобы это изменить, можно задать свойства `column-fill: balance` и `break-inside: avoid-column`, которые разместят картинки по столбцам, начиная с левого столбца и заполняя равномерно по высоте.

Вот CSS-класс для галереи на основе Masonry с горизонтальной ориентацией:

.gallery-gallery-columns-3 {
  column-count: 4; /* Количество столбцов */
  column-gap: 1rem; /* Расстояние между столбцами */
  column-fill: balance; /* Равномерно заполнять столбцы */
}

.gallery-item {
  break-inside: avoid-column; /* Не переносить элементы на новый столбец */
  margin-bottom: 1rem; /* Расстояние между элементами */
}


С помощью этих свойств можно создать галерею на основе Masonry с горизонтальной ориентацией. Обратите внимание, что пример создаст четыре столбца для элементов, расстояние между столбцами составляет `1rem`, а между элементами `1rem`. Вы можете настроить эти значения под свои нужды.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы