column-width: желаемая ширина текстовой колонки
Column-width предлагает браузеру ширину колонок, а количество подбирается по доступному пространству. Это позволяет менять раскладку без отдельного медиазапроса для каждого числа колонок.
Назначение
Column-width предлагает браузеру ширину колонок, а количество подбирается по доступному пространству. Это позволяет менять раскладку без отдельного медиазапроса для каждого числа колонок.
Как это работает
Указанная величина не гарантирует точную ширину каждой колонки. Браузер размещает подходящее количество с учётом промежутков, затем распределяет пространство. При сочетании с column-count количество получает дополнительное ограничение.
Пример
<style>.notes{column-width:16rem;column-gap:1.5rem}.notes p{margin-top:0}</style>
<div class="notes"><p>Заметка о разметке: выбирайте элемент по смыслу содержимого и сохраняйте понятную структуру документа.</p><p>Заметка об оформлении: проверьте длину строк и запас места при увеличении пользовательского шрифта.</p><p>Заметка о проверке: сравните узкое окно с широким и прочитайте текст в том порядке, который задаёт HTML.</p></div>Что должно получиться
При изменении ширины контейнера браузер меняет число колонок. На пространстве меньше предложенных 16rem остаётся одна более узкая колонка, а не обязательное переполнение ради точного размера.
Граница применения и частая ошибка
Не воспринимайте column-width как min-width каждой карточки. Это параметр потока текста с фрагментацией. Если нужен предсказуемый порядок набора интерактивных карточек, рассмотрите Grid и проверьте порядок фокуса.
Самостоятельная проверка
Задайте ширину контейнера 300, 600 и 900 пикселей, затем увеличьте корневой шрифт. Запишите количество и реальные ширины колонок. Добавьте column-count:2 и объясните, как изменилось ограничение.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.