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

Question

[an]

Сделал таким макаром

.gallery.gallery-columns-3 {
  -webkit-column-count: 4;
  /* Chrome, Safari, Opera */
  -moz-column-count: 4;
  /* Firefox */
  column-count: 4;
}

но проблемка в том, что itemы идут сверху вниз
а нужно слева направо

Comments

[Кирилл Никитин]

Вот такое у меня есть в закладках https://codepen.io/jibin2706/pen/bGYBrQQ

[Ankhena]

Взять любой из скриптов делающий такую раскладку и вперед.

На css без js можно сделать только по колонкам.

Answer 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`. Вы можете настроить эти значения под свои нужды.

Comments

[Ankhena]

С column-fill: balance они тоже будут заполняться по столбцам, а не по строкам.
https://codepen.io/AnnaSummer/pen/XWPqQKN