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

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

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

В выводе:

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

Примеры результатов

1 Примеры

Сгенерировать адаптивный masonry на 4 колонки

Выдает готовые HTML и CSS с full-width featured card.

HTML
```html
<section class="masonry">...
```

CSS
```css
.masonry { ... }
```
Показать параметры ввода
{ "columns": 4, "containerWidth": "1200px", "gap": "20px", "layoutEngine": "grid", "responsiveBreakpoints": "640:2\n960:3\n1280:4", "skipElements": ".masonry__item--featured" }

Ключевые факты

Категория
Разработка и Web
Типы входных данных
number, text, select, textarea
Тип результата
text
Покрытие примерами
4
API доступен
Yes

Обзор

Генератор CSS masonry layout позволяет быстро создавать адаптивные сетки в стиле «водопад» без использования JavaScript. Настройте количество колонок, ширину контейнера, отступы и брейкпоинты, выберите движок (CSS Columns или Flexbox) и получите готовый HTML-шаблон с прокомментированным CSS-кодом для интеграции в ваш проект.

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

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

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

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

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

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

Примеры

1. Адаптивная галерея изображений

Frontend-разработчик
Контекст
Разработчику нужно сверстать галерею фотографий разной высоты для сайта-портфолио, обеспечив корректное отображение на мобильных и десктопных устройствах.
Проблема
Написание медиа-запросов и настройка CSS-колонок вручную занимает много времени и требует тестирования.
Как использовать
Указать 4 колонки, отступ 16px, выбрать CSS Columns и задать брейкпоинты для мобильных и планшетов.
Пример конфигурации
Колонки: 4
Отступ: 16px
Движок: CSS Columns
Брейкпоинты:
640:2
960:3
1280:4
Результат
Получен готовый CSS-код с медиа-запросами, который автоматически перестраивает галерею от 1 до 4 колонок в зависимости от ширины экрана.

2. Сетка блога с рекламными баннерами

Веб-дизайнер
Контекст
Дизайнер верстает страницу блога, где среди стандартных карточек статей периодически встречаются широкие рекламные баннеры.
Проблема
Рекламные баннеры должны разрывать сетку и занимать 100% ширины контейнера, не ломая общую структуру masonry.
Как использовать
Настроить сетку на 3 колонки и добавить класс баннера в поле «Пропускаемые элементы».
Пример конфигурации
Колонки: 3
Ширина контейнера: 100%
Движок: CSS Columns
Пропускаемые элементы: .promo-banner
Результат
Сгенерирован код, в котором элементы с классом .promo-banner корректно прерывают колонки и растягиваются на всю ширину контейнера.

Проверить на примерах

development
Примеры CSS Фреймворка Milligram
Примеры CSS фреймворка Milligram, включая типографику, формы, сетки и компоненты
title token css
sample
Примеры CSS-фреймворка Bulma
Примеры CSS-фреймворка Bulma, включая столбцы, компоненты, элементы управления формами, систему сетки и современные шаблоны дизайна на основе CSS
title token css
sample
Примеры Tailwind CSS
Примеры Tailwind CSS - CSS-фреймворк с утилитарно-первым подходом, адаптивным дизайном, компонентами и пользовательской конфигурацией
title token css
sample
Примеры CSS-селекторов
Коллекция примеров CSS-селекторов для тестирования извлечения и анализа
title token css
sample

Связанные хабы

Инструменты Json для Generate
Изучите 33 инструментов json для сценариев generate и быстро сравните близкие утилиты.
Инструменты Design для Generate
Изучите 19 инструментов design для сценариев generate и быстро сравните близкие утилиты.
Инструменты Pdf для Generate
Изучите 10 инструментов pdf для сценариев generate и быстро сравните близкие утилиты.
Инструменты Audio для Generate
Изучите 8 инструментов audio для сценариев generate и быстро сравните близкие утилиты.

FAQ

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

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

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

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

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

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

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

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

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

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

Документация API

Конечная точка запроса

POST /ru/api/tools/css-masonry-layout-generator

Параметры запроса

Имя параметра Тип Обязательно Описание
columns number Нет -
containerWidth text Нет -
gap text Нет -
layoutEngine select Нет -
responsiveBreakpoints textarea Нет -
skipElements textarea Нет -

Формат ответа

{
  "result": "Processed text content",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
Текст: Текст

Документация MCP

Добавьте этот инструмент к конфигурации сервера MCP: 

{
  "mcpServers": {
    "elysiatools-css-masonry-layout-generator": {
      "name": "css-masonry-layout-generator",
      "description": "Генерирует чистый CSS masonry layout с брейкпоинтами, отступами и исключаемыми элементами",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=css-masonry-layout-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Вы можете объединять несколько инструментов, например: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, максимум 20 инструментов.

Если вы столкнулись с проблемами, пожалуйста, свяжитесь с нами по адресу [email protected]