Перейти к основному содержанию
iotools.cloudiotools.cloud

Генератор колонок CSS

API reference

Создавайте многоколоночную верстку в CSS — количество колонок, ширину, промежуток и разделительную линию — с предпросмотром в стиле газеты, затем скопируйте CSS и HTML.

Ввод

0 = авто. Если задана ширина, браузер может использовать меньше колонок, чем указано, когда места мало.

Вывод

Ваша многоколоночная верстка появится здесь.

CSS
HTML
Это было полезно?

Другие способы использовать этот инструмент

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-columns-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{}'

Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.

Спросите у ИИ-агента

Use the IOTools `css-columns-generator` tool (CSS Columns Generator) on this input:

YOUR_INPUT_HERE

Вставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.

Виджет для встраивания

<iframe
  src="https://iotools.cloud/embed/css-columns-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Генератор колонок CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.

Стоимость вызова API/MCPОт 5 кредитов
Нужно больше кредитов?Посмотреть тарифы

Также доступно через

ИнтеграцииРасширение для браузераРасширение для VS Code

Руководства

Многоколоночная верстка в CSS разбивает один блок содержимого на несколько колонок, как в газете, без дополнительной разметки. Этот генератор позволяет задать количество колонок, предпочтительную ширину, промежуток и разделительную линию, показывает предпросмотр в реальном времени и выдаёт CSS для копирования.

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

  1. Задайте количество колонок (1–6) или добавьте ширину колонки, чтобы браузер сам определил, сколько колонок поместится.
  2. Настройте промежуток между колонками.
  3. Выберите разделительную линию: стиль, толщину и цвет. Выберите «Нет», чтобы убрать её.
  4. Скопируйте CSS и HTML.

Количество или ширина

column-count задаёт число колонок. column-width задаёт желаемую ширину, и браузер размещает столько колонок, сколько поместится. Если заданы оба параметра, сокращённая запись columns: 200px 3 означает «не более 3 колонок, каждая шириной не менее 200px». Так обычно делают верстку, которая аккуратно сворачивается на маленьких экранах.

Советы

  • Колонки подходят для длинного текста. Для сеток карточек и макетов страниц используйте CSS Grid, см. CSS Grid Generator.
  • Используйте break-inside: avoid для вложенных элементов, например рисунков, которые не должны разрываться между колонками.
  • Разделительная линия не занимает собственного места. Она находится в середине промежутка.

Конфиденциальность

Всё работает в вашем браузере. Ваши настройки никогда не загружаются на сервер.

css columnsmulti column layoutcolumn-countcolumn-gapcolumn-rulenewspaper layouttext columns

Нравятся инструменты? Уберите рекламу.

Один платёж навсегда убирает всю рекламу с вашего аккаунта. Без подписки, без слежки.

Убрать рекламу