Multi-column layout

CSS-колонки для разбивки текста на несколько столбцов (газетная вёрстка).

Зачем нужно

Автоматически разбивает контент на колонки без Grid/Flexbox. Идеально для текстового контента, списков и карточек.

Где используется

  • Статьи и длинные тексты (газетный стиль)
  • Списки ссылок / тегов в несколько колонок
  • Footer-навигация

Code example

/* Фиксированное число колонок */
.article {
  column-count: 3;
  column-gap: 2rem;
}

/* Минимальная ширина колонки (адаптивно) */
.responsive-columns {
  columns: 250px auto;
  column-gap: 1.5rem;
}

/* Разделитель между колонками */
.with-divider {
  column-count: 2;
  column-rule: 1px solid #e5e7eb;
}

/* Элемент на всю ширину */
.columns h2 {
  column-span: all;
  text-align: center;
}

/* Предотвращение разрыва внутри элемента */
.card {
  break-inside: avoid;
  margin-bottom: 1rem;
}

/* Списки в колонках */
.tag-list {
  column-count: 3;
  column-gap: 1rem;
}
.tag-list li {
  break-inside: avoid;
}

Связанные темы

Ресурсы