Загрузка...

Многоколоночная вёрстка CSS

Optional Advanced только что разобрал image sprites — один лист, много плиток. Эта сессия — другой необязательный инструмент: несколько колонок. Думайте о газете, не о панели кнопок. Вы просите CSS залить длинную статью в два-три вертикальных потока. Вы не раскладываете независимые карточки по Grid.

Прямой ответ

Многоколоночная вёрстка CSS делит один текучий блок — обычно длинный текст — на газетные колонки. Задаёте число (column-count), удобную ширину колонки (column-width), межколонник (column-gap) и необязательную вертикальную линию (column-rule). Текст, списки и строчное содержимое заполняют первую колонку, затем следующую. Это для длинного текста. Для навигации, колод карточек и каркаса страницы оставайтесь с Flexbox или Grid, чтобы каждая коробка оставалась целой.

Зачем колонки

Длинные строки трудно читать. Журналы решили это несколькими более короткими колонками на странице. CSS перенёс идею в веб: один элемент, один текстовый поток, автоматический перенос в колонки. Это не Flexbox (ряд или колонка элементов) и не Grid (двумерная карта областей). Многоколоночность — инструмент фрагментации: браузер может разрезать абзац на границе колонки, если вы не запретите.

Число: «хочу три колонки»

column-count просит число. Браузер делит ширину контейнера на столько колонок (минус зазоры):

Newspaper article with column-count

css 
.article {
column-count: 3;
max-width: 60rem;
}

На широкой статье увидите три потока. На узком телефоне три тонкие колонки нечитаемы — сочетайте с media query или предпочитайте column-width, чтобы число падало при нехватке места.

Ширина: «каждая колонка примерно такой»

column-width — подсказка, не запертая пиксельная клетка. Браузер создаёт столько колонок не уже этого значения, сколько влезет:

Flexible columns with column-width

css 
.article {
column-width: 16rem;
max-width: 60rem;
}

Если коробка около 48rem плюс зазоры, может быть три колонки; сожмётся — две, потом одна. Обычно спокойнее фиксированного column-count: 3 на каждом вьюпорте. Можно задать оба: число — максимум, ширина — минимальный комфорт. Сокращение columns — сначала ширина, потом число, например columns: 16rem 3.

Зазор и линия

Колонкам нужен воздух. column-gap — межколонник. column-rule рисует тонкую линию в нём (толщина, стиль, цвет — как border, но без лишнего места в раскладке, как у рамки коробки):

Gap and rule between columns

css 
.article {
column-width: 16rem;
column-gap: 2rem;
column-rule: 1px solid #cbd5e1;
}

Есть частные сокращения (column-rule-width, column-rule-style, column-rule-color). Линию держите спокойной: газетный разделитель, не вторая дизайн-система.

Заголовок на всю ширину

Заголовок часто должен сидеть на всю ширину, колонки — под ним. column-span: all на потомке так и делает:

Heading that spans all columns

css 
.article h2 {
column-span: all;
margin: 0 0 1rem;
}

.article {
column-count: 2;
column-gap: 1.5rem;
}

В быту почти только none и all. Span — для заголовка, лид-иллюстрации или выноски, не для каждого абзаца.

Чтобы коробки не рвались

Карточка, фигура с подписью или цитата выглядит сломанной, если разрыв колонки режет её пополам. break-inside: avoid просит браузер по возможности держать коробку в одной колонке:

Keep a card from splitting across columns

css 
.article figure,
.article .callout {
break-inside: avoid;
margin: 0 0 1rem;
}

Ещё полезны break-before / break-after в печатных потоках и старый page-break-inside: avoid как запасной вариант. Не каждую битву выиграете — очень высокие коробки всё равно вылезут — но обычно хотят, чтобы подпись осталась с картинкой. column-fill: balance (часто значение по умолчанию) выравнивает высоты; auto сначала заполняет первую колонку (больше как газетный «перескок»).

Колонки vs Flex vs Grid

📊 Multi-column vs Flex vs Grid

Tool Job Poor fit
Multi-column (column-*) Long article, glossary, name list that should read like a newspaper Card galleries, nav bars, full page shells
Flexbox One-dimensional rows/columns of whole items (toolbar, chips, simple stacks) Pouring a novel into three text streams
Grid Two-dimensional page or component map (header / main / aside) Replacing column-count on a <p> soup
Sprites (background-position) Decorative icon tiles on a sheet Laying out article text

Модули Flexbox и Grid уже учили размещать элементы. Многоколоночность не даёт justify-content и именованных областей. Она льёт один поток. Если каждый потомок должен остаться кликабельным прямоугольником — Flex или Grid.

Каркас страницы остаётся Flex или Grid

Не превращайте весь сайт в column-count: 3. Шапка, навигация и колода карточек хотят целые коробки:

Page chrome stays Flex or Grid

css 
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.card-deck {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}

.prose {
column-width: 18rem;
column-gap: 1.75rem;
}

.prose может быть многоколоночным. .card-deck — нет. Смешение на одном элементе режет фигуры и сажает кнопки в чужой поток.

Узкие экраны и порядок чтения

Если колонки уже комфортной строки (примерно 12–16rem текста), оставьте одну колонку. Скринридеры и клавиатура идут по порядку документа, а не «вниз по колонке, потом следующая» как визуальный скан — нормально для статьи, странно если колонками имитируют дашборд несвязанных виджетов. В RTL колонки заполняются по writing mode; линия всё равно в межколоннике.

Попробуйте сами

  1. Оберните абзацы в .prose с column-count: 2 и column-gap.
  2. Переключитесь на column-width: 16rem и тяните окно — смотрите, как меняется число.
  3. Добавьте column-rule: 1px solid спокойным серым.
  4. Поставьте <h2> с column-span: all.
  5. Оберните фигуру в break-inside: avoid. Затем тот же CSS на сетку карточек — увидите, почему там спокойнее Flex/Grid.

Частые ошибки

  • Многоколоночность как галерея карточек или вёрстка всей страницы
  • Жёсткое column-count: 3 на телефоне, пока в строке три слова
  • Забыть column-gap, чтобы потоки слиплись
  • Картинки и подписи режутся на границе колонки
  • Обращаться с колонками как с Flex: у потока нет flex-grow
  • Путать со спрайтами — спрайт кропает фон; колонки дробят текст

Кратко

  • Многоколоночность льёт один поток в газетные колонки
  • column-count — число; column-width — удобный минимум; можно вместе
  • column-gap и column-rule оформляют межколонник; заголовки — column-span: all
  • break-inside: avoid держит фигуры и выноски целыми, когда получается
  • Flex и Grid по-прежнему владеют каркасом страницы и колодами карточек
  • Optional Advanced дальше: маскирование (masking)

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
7
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 73 из 75
Css Урок