Ширина столбца

Базовая линия Широко доступно

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2017 года.

Свойство column-width CSS задаёт идеальную ширину столбца в многоколоночном макете. Контейнер будет иметь столько столбцов, сколько поместится без того, чтобы какой-либо из них имел ширину меньше, чем значение column-width. Если ширина контейнера уже, чем указанное значение, ширина отдельного столбца будет меньше объявленной ширины столбца.

Попробуйте

Это свойство может помочь вам создавать адаптивные макеты, которые подходят для разных размеров экрана. Особенно при наличии свойства column-count (которое имеет приоритет), необходимо указать все связанные значения длины, чтобы добиться точной ширины столбца. В горизонтальном тексте это width, column-width, column-gap и column-rule-width.

Синтаксис

/* Keyword value */
column-width: auto;

/* <length> values */
column-width: 60px;
column-width: 15.5em;
column-width: 3.3vw;

/* Global values */
column-width: inherit;
column-width: initial;
column-width: revert;
column-width: revert-layer;
column-width: unset;

Свойство column-width задаётся одним из значений, перечисленных ниже.

Значения

<length>: Указывает оптимальную ширину столбца. Фактическая ширина столбца может отличаться от указанного значения: она может быть шире, если необходимо заполнить доступное пространство, и уже, если доступного пространства недостаточно. Значение должно быть строго положительным, в противном случае объявление недействительно. Процентные значения также недопустимы.
auto: Ширина столбца определяется другими свойствами CSS, такими как column-count.

Формальное определение

Начальное значение	`auto`
Применимо к	Блочные контейнеры, кроме контейнеров оберток таблиц
Наследуется	нет
Вычисленное значение	абсолютная длина, ноль или больше
Тип анимации	длина

Формальный синтаксис

column-width = 
  auto                                |
  <length [0,∞]>                      |
  min-content                         |
  max-content                         |
  fit-content( <length-percentage> )  

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

Установка ширины столбца в пикселях

HTML

<p class="content-box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
  enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis
  nisl ut aliquip ex ea commodo consequat.
</p>

CSS

.content-box {
  column-width: 100px;
}

Результат

Спецификации

Спецификация
CSS Box Sizing Module Level 3 # column-sizing
CSS Multi-column Layout Module Level 1 # cw

Совместимость браузеров

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`column-width`	501	1212	50 1.5–74 До версии 37, несколько столбцов не работали с элементами `display: table-caption`.	11.115	93	5018	50 4 До версии 37, несколько столбцов не работали с элементами `display: table-caption`.	11.115	91	5.01.0	504.4
`auto`	1	12	1.5	15	3	18	4	14	2	1.0	4.4

См. также

Многоколоночный макет (Изучение макета)
Основные понятия многоколоночного макета

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/column-width