Галерея masonry на CSS (в стиле Pinterest)

Галерея masonry на CSS (в стиле Pinterest): для чего нужен

Раскладка masonry стыкует фото разной высоты в столбцы без пустот, как в Pinterest. Вставьте адреса фото и выберите число столбцов на телефоне, планшете и компьютере, отступы, скругление и подпись поверх фото.

Код использует CSS columns, которые работают во всех браузерах, и добавляет встроенный masonry CSS (display: grid-lanes, вышедший в Safari 26.4 в марте 2026 года и пока без стабильной поддержки в Chrome и Firefox) внутри @supports, как рекомендует прогрессивное улучшение. Страница объясняет разницу в порядке между двумя техниками.

Как пользоваться

1. Вставьте адреса фото.
2. Настройте столбцы, отступы и скругление.
3. Скопируйте код.

Когда использовать

• Портфолио фотографа.
• Галерея работ салона или студии.
• Доска вдохновения.

Частые вопросы

Что такое раскладка masonry?

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

Нужен ли JavaScript?

Нет. Код использует CSS columns, которые работают во всех браузерах. Там, где уже есть встроенный masonry в CSS (display: grid-lanes, вышедший в Safari 26.4 в марте 2026 года), @supports включает новую версию, сохраняющую порядок фото слева направо.

Почему порядок фото меняется с CSS columns?

С columns фото идут вниз по первому столбцу и только потом переходят во второй, как в газете. Если порядок важен (например, сначала самые новые), поставьте самые важные в начало списка и используйте мало столбцов или дождитесь, пока grid-lanes появится в других браузерах.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты