Каменная кладка: подходы на CSS и JS

Мозаичный макет размещает элементы в столбцах, где каждый элемент заполняет следующее доступное вертикальное пространство, подобно Pinterest. Столбцы имеют одинаковую ширину, но элементы — разную высоту. В результате получается плотная, визуально динамичная сетка без пустого пространства между строками.

В браузерах Chrome и Firefox при включённом флаге поддерживается grid-template-rows: masonry. Элементы размещаются в столбцах, но высота строк определяется их содержимым, поэтому элементы разной высоты уплотняются без промежутков. Это будущее нативное решение.

Колонки CSS создают раскладку, похожую на мозаичную: columns: 3; column-gap: 1rem. Элементы автоматически идут сверху вниз внутри каждого столбца. Ограничение: элементы упорядочиваются по столбцам (верх столбца 1, верх столбца 2 и так далее), а не по строкам, что влияет на порядок чтения и доступность.

Не позволяйте элементам разрываться между столбцами: задайте для каждого элемента break-inside: avoid. Без этого высокая карточка может разделиться между двумя столбцами, разрезав содержимое пополам. Всегда добавляйте это свойство, если используете колонки CSS для содержимого в виде карточек.

Masonry.js (автор David DeSandro) перемещает абсолютно позиционированные элементы, вычисляя высоту столбцов и помещая каждый элемент в самый короткий столбец. Isotope расширяет эту возможность сортировкой и фильтрацией. Обе библиотеки требуют JavaScript для вычисления и применения позиций.

Лёгкий подход: определите сетку с фиксированным числом столбцов и строками высотой 1 пиксель, а затем с помощью JS задайте каждому элементу grid-row-end: span N в зависимости от высоты его содержимого и высоты строки. Элементы сохраняют выравнивание по строкам сетки, обеспечивая при этом разную высоту.

Позиции элементов мозаичной раскладки устаревают при изменении размера окна или загрузке изображений. Используйте ResizeObserver, чтобы обнаруживать изменения размера и запускать повторное вычисление. Устанавливайте задержку между пересчётами, чтобы избежать чрезмерных вычислений во время быстрых изменений размера.

Изображения с неизвестной высотой заставляют мозаичную раскладку пересчитываться после загрузки. Указывайте явные атрибуты ширины и высоты для всех изображений, чтобы браузер зарезервировал место до загрузки. Это предотвращает смещение позиций и уменьшает количество проходов повторного вычисления.

Добавление элементов в мозаичную раскладку требует пересчёта только затронутых столбцов (столбцов с новыми элементами), а не всей сетки. Библиотеки вроде Masonry.js поддерживают анимацию добавляемых элементов и поэтапную раскладку без полного переразмещения при каждой новой порции.

Визуальный порядок элементов отличается от порядка DOM в раскладках, где элементы размещаются с помощью JavaScript. Убедитесь, что порядок перехода с клавиатуры соответствует порядку DOM (логической последовательности чтения), а не визуальному расположению. Осторожно добавляйте tabindex или полагайтесь на естественный порядок DOM для навигации с клавиатуры.

Колонки CSS просты и не требуют JS, но задают порядок чтения по столбцам, а не по строкам, и не поддерживают фильтрацию или сортировку. Мозаичная сетка пока не поддерживается в готовых к эксплуатации браузерах. Мозаичная раскладка на JavaScript полнофункциональна, но увеличивает объём кода и добавляет задержку отрисовки, поскольку позиции вычисляются после загрузки содержимого.

Какое свойство CSS предотвращает разделение карточки между двумя колонками CSS?

Мозаичный макет можно создать с помощью колонок CSS (просто, но с порядком элементов по столбцам), экспериментального grid-template-rows: masonry (перспективное будущее решение) или библиотек JavaScript, таких как Masonry.js (полнофункциональных, с сортировкой и фильтрацией). Каждый подход предполагает компромисс между простотой, доступностью и возможностями.