# Генератор CSS masonry layout

Генерирует чистый CSS masonry layout с брейкпоинтами, отступами и исключаемыми элементами

> Каноническая страница: https://elysiatools.com/ru/tools/css-masonry-layout-generator

- **Категория:** Development

- **Ключевые слова:** css, masonry, layout, grid

## Обзор

Укажите число колонок, ширину контейнера, отступы и правила брейкпоинтов, затем выберите реализацию на CSS columns или Flexbox. Инструмент выдает готовые HTML и CSS с комментариями.

В выводе:
- HTML-шаблон
- прокомментированный CSS
- сводка по брейкпоинтам и skip-селекторам

## Входные данные

- **Колонки** (number)
- **Ширина контейнера** (text)
- **Отступ** (text)
- **Движок layout** (select)
- **Адаптивные брейкпоинты** (textarea): 640:2 960:3 1280:4
- **Пропускаемые элементы** (textarea): .masonry__item--featured .masonry__hero

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

- Когда нужно создать галерею изображений разной высоты или сетку карточек блога без пустых пространств.
- Если вы хотите отказаться от тяжелых JavaScript-библиотек для реализации masonry-раскладки.
- При разработке адаптивных интерфейсов, где количество колонок должно динамически меняться в зависимости от ширины экрана.

## Как это работает

- Укажите базовые параметры: максимальное количество колонок, ширину контейнера и размер отступов (gap) между элементами.
- Выберите технологию раскладки: CSS Columns для классического «водопада» или Flexbox для построчного заполнения.
- Задайте правила адаптивности (брейкпоинты) в формате «ширина:колонки» и укажите CSS-классы элементов, которые должны занимать всю ширину.
- Скопируйте сгенерированный HTML-каркас и готовый CSS-код для использования в вашем веб-проекте.

## Сценарии использования

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

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

### В чем разница между CSS Columns и Flexbox в этом генераторе?

CSS Columns распределяет элементы сверху вниз по колонкам, создавая классический masonry-эффект. Flexbox выстраивает элементы слева направо с переносом на новую строку.

### Можно ли сделать так, чтобы некоторые карточки занимали всю ширину?

Да, укажите CSS-классы таких элементов в поле «Пропускаемые элементы» (например, .featured-card), и генератор добавит для них соответствующие стили.

### Нужен ли JavaScript для работы сгенерированного кода?

Нет, инструмент генерирует решение исключительно на чистом CSS, что улучшает производительность и упрощает поддержку.

### Как правильно настроить адаптивные брейкпоинты?

Вводите каждое правило с новой строки в формате «ширина:колонки». Например, «768:2» означает, что на экранах шире 768px будет отображаться 2 колонки.

### Какие единицы измерения поддерживаются для ширины и отступов?

Вы можете использовать любые валидные CSS-единицы, такие как px, %, rem, em или функции вроде min() и calc().

## Связанные инструменты

- [Синхронизатор палитры Tailwind](https://elysiatools.com/ru/tools/tailwind-color-palette-sync): Введите HEX, выберите схему именования (шкала 50–950 / одно имя / вложенность) — генерирует фрагмент theme.extend.colors для tailwind.config.ts с уровнями WCAG AA/AAA. Тёмная тема опциональна.
- [Конвертер cURL в Go (net/http)](https://elysiatools.com/ru/tools/curl-to-go): Преобразует команду cURL в фрагмент кода Go net/http с http.NewRequest, заголовками и телом
- [Конвертер cURL в JavaScript (axios)](https://elysiatools.com/ru/tools/curl-to-js-axios): Преобразует команду cURL в фрагмент кода JavaScript axios с объектом конфигурации, заголовками и данными
- [Конвертер cURL в JavaScript (fetch)](https://elysiatools.com/ru/tools/curl-to-js-fetch): Преобразует команду cURL в фрагмент кода JavaScript fetch() с заголовками, телом и методом
- [Конвертер cURL в PHP (cURL)](https://elysiatools.com/ru/tools/curl-to-php): Преобразует команду cURL в фрагмент кода PHP cURL с curl_setopt, заголовками и POST-полями
- [Конвертер cURL в Python (requests)](https://elysiatools.com/ru/tools/curl-to-python): Преобразует команду cURL в фрагмент кода Python requests с заголовками, данными и методом
- [Сокращатель URL](https://elysiatools.com/ru/tools/url-shortener): Генерирует короткие URL с использованием реальных сервисов сокращения (is.gd и v.gd)
- [Стресс-тестер API-контрактов](https://elysiatools.com/ru/tools/api-contract-stress-tester): Создает граничные тесты по OpenAPI 3.x и при необходимости отправляет их в реальный backend для поиска расхождений с контрактом.

## Примеры

- [Примеры CSS-фреймворка Bulma](https://elysiatools.com/ru/samples/bulma): Примеры CSS-фреймворка Bulma, включая столбцы, компоненты, элементы управления формами, систему сетки и современные шаблоны дизайна на основе CSS
- [Образцы CSS](https://elysiatools.com/ru/samples/css-viewer-samples): Образцы файлов для браузерного CSS просмотрщика
- [Примеры CSS Фреймворка Milligram](https://elysiatools.com/ru/samples/milligram): Примеры CSS фреймворка Milligram, включая типографику, формы, сетки и компоненты
- [Примеры Tailwind CSS](https://elysiatools.com/ru/samples/tailwind-css): Примеры Tailwind CSS - CSS-фреймворк с утилитарно-первым подходом, адаптивным дизайном, компонентами и пользовательской конфигурацией

## Связанные материалы

- [Работа с CSS: вёрстка и каскад](https://elysiatools.com/ru/hubs/css-authoring-layout-and-cascade-workflows): Создавайте и проверяйте CSS: форматирование, диагностика селекторов, адаптивные фрагменты, визуальные эффекты и рендер-проверки.