`column-rule-width` — свойство CSS

Свойство column-rule-width CSS задаёт ширину линий, которые проводятся между колонками в многоколоночных макетах, а также в макетах на основе сетки и flexbox.

Попробуйте

column-rule-width: thin;

column-rule-width: 4px;

column-rule-width: thin, medium, thick;

column-rule-width: repeat(2, 1px, thick), 10px;

column-rule-width: 10px, repeat(auto, 1px, 2px), 10px;

<section id="default-example">
  <p id="example-element">
    London. Noel term lately over, and the Lord George sitting in Lincoln's Inn
    Hall. Great May weather. As much mud in the streets as if the waters had but
    newly retired from the face of the earth, and it would not be weird to meet
    an platypus, two feet long or so, waddling like an lizard up Morgan Hill.
  </p>
</section>

#example-element {
  columns: 6;
  column-rule-style: solid;
  column-rule-color: teal;
  gap: 7px;
}

Синтаксис

/* Keyword values */
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;
column-rule-width: thin, medium, thick;
column-rule-width: thick, repeat(5, thin), thick;
column-rule-width: thick, repeat(auto, thin, medium), thick;

/* Length values */
column-rule-width: 0.1em;
column-rule-width: 5px;
column-rule-width: 1px, 3px, 5px;
column-rule-width: 0.1rem, repeat(auto, 1px), 10px, 0.5rem;
column-rule-width: 5px, repeat(5, 1px, 3px), 5px;

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

Значения

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

<line-width>

Задаёт ширину линии: явным неотрицательным значением <length> или одним из ключевых слов: thin, medium или thick. Значение по умолчанию — medium.

<repeat-line-width>

Функция repeat(), первый аргумент которой — <integer>, равный 1 или больше, а последующие аргументы — одно или несколько значений <line-width>. Целое число задаёт количество повторений значений <line-width>.

<auto-repeat-line-width>

Функция repeat(), первый аргумент которой — auto, а последующие аргументы — одно или несколько значений <line-width>. Указанные значения <line-width> повторяются столько раз, сколько необходимо, чтобы задать значения для всех правил колонок, которые явно не указаны другими компонентами значения свойства.

Описание

Свойство column-rule-width задаёт ширину линий правил колонок, проводимых в промежутках между соседними колонками в контейнерах с многоколоночным макетом, flexbox и сеткой, содержащих более одной колонки.

Значение представляет собой список компонентов, разделённых запятыми, которые могут включать типы <line-width>, <repeat-line-width> и <auto-repeat-line-width>.

Свойство column-rule-width, а также свойства column-rule-color и column-rule-style можно также задать с помощью краткой записи column-rule, а rule-width — это краткая запись, задающая свойства column-rule-width и row-rule-width.

Значение <line-width> может быть любым допустимым значением CSS-типа <line-width>: ключевым словом thin, medium или thick либо положительным значением <length>. Процентные значения недопустимы.

Если значение свойства состоит только из одного значения <line-width>, все правила колонок будут иметь эту ширину. Если объявить следующее, все правила колонок будут иметь ширину 2px:

column-rule-width: 2px;

Если указано несколько значений <line-width>, они применяются к правилам колонок в заданном порядке. Если правил колонок больше, чем значений <line-width>, список ширин линий повторяется, пока для каждого правила не будет задана ширина. Например, если объявить следующее, каждое нечётное правило будет иметь ширину thick, а каждое чётное — 0.25rem.

column-rule-width: thick, 0.25rem;

Повторение ширины линий

Функцию repeat() можно использовать с целым числом не меньше 1 в качестве первого аргумента, чтобы указанное число раз повторить список допустимых значений CSS-типа <line-width>, переданных в качестве последующих аргументов. Это позволяет повторить одну и ту же ширину заданное количество раз, не указывая одно значение <line-width> многократно. Следующие объявления эквивалентны:

column-rule-width: 1rem, thick, thin, thick, thin, thick, thin;
column-rule-width: 1rem, repeat(3, thick, thin);

Можно использовать любые значения <line-width>, в том числе пользовательские свойства, разрешающиеся в значение <line-width>. Использование repeat() может упростить запись значений, особенно при сложных вычислениях длины. Эта функция позволяет задать повторяющийся шаблон одним вызовом независимо от количества колонок. Следующие объявления эквивалентны:

column-rule-width:
  1rem, min(calc(var(--base) - 3px), 10px), abs(calc(var(--secondary) - 30px)),
  min(calc(var(--base) - 3px), 10px), abs(calc(var(--secondary) - 30px)),
  min(calc(var(--base) - 3px), 10px), abs(calc(var(--secondary) - 30px)),
  min(calc(var(--base) - 3px), 10px), abs(calc(var(--secondary) - 30px)),
  min(calc(var(--base) - 3px), 10px), abs(calc(var(--secondary) - 30px)), thin;
column-rule-width:
  1rem,
  repeat(
    5,
    min(calc(var(--base) - 3px), 10px),
    abs(calc(var(--secondary) - 30px))
  ),
  thin;

В результате создаётся список из 12 значений ширины. Если количество значений ширины в списке ширин значения column-rule-width превышает количество промежутков между колонками, лишние значения ширины игнорируются. Если в контейнере три колонки, правило в первом промежутке будет иметь ширину 1rem, а ширина второго определяется функцией min().

Если промежутков больше, чем значений ширины, список ширин повторяется. Если в контейнере 13 или 25 колонок, эта последовательность ширин будет повторена соответственно один или два раза, а последнее правило будет иметь ширину thin. При любом другом количестве колонок — до 25 — последнее правило не будет иметь ширину thin.

Автоматическое повторение ширины линий

Функция repeat() также принимает auto в качестве первого аргумента вместо положительного целого числа. Если первым аргументом является auto, список значений <line-width>, переданных в качестве последующих аргументов, повторяется столько раз, сколько необходимо, чтобы задать значения для всех правил колонок, которые явно не указаны другими компонентами значения свойства.

column-rule-width: 10px, repeat(auto, thin), 10px;

В этом случае первое правило колонок будет иметь ширину 10px, последнее — 10px, а все остальные — thin. Неважно, содержит ли контейнер 3, 6, 11, 16 или 21 колонку: первая и последняя колонки всегда будут иметь ширину 10px. Это означает, что при наличии только 2 или 3 колонок правил колонок тонкой ширины не будет.

Ключевое слово auto внутри функции repeat() создаёт автоматический повторитель, который задаёт значения ширины линий правил строк, которые иначе не получили бы значений из других частей списка, предотвращая циклический повтор списка. Значение column-rule-width может содержать не более одного repeat(auto, <line-width>).

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

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

column-rule-width = 
  <line-width>

<line-width> = 
  <length> |
  thin |
  medium |
  thick

Примеры

Основное использование

В этом примере показано использование одного ключевого слова, задающего одинаковый размер для всех правил колонок.

HTML

Добавим абзац текста:

<p>
  This is a bunch of text split into three columns. The `column-rule-width`
  property is used to change the width of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>

CSS

Создадим многоколоночный контейнер с помощью свойства column-count. Поскольку по умолчанию свойство column-rule-style имеет значение none, чтобы правила колонок были видны, необходимо задать ему видимое значение. Затем зададим свойству column-rule-width значение thick, оставив для свойства column-rule-color значение currentcolor по умолчанию.

p {
  column-count: 3;
  column-rule-style: solid;

  column-rule-width: thick;
}

Результат

В многоколоночных макетах свойство gap по умолчанию имеет значение 1em, которое больше, чем наше column-rule-width, поэтому линии не накладываются на содержимое.

Несколько значений

В этом примере показано использование нескольких значений свойства column-rule-width. Также демонстрируется, что линии, выходящие за пределы промежутков, рисуются позади содержимого.

HTML

Добавим список авторов:

<ul>
  <li>Kimberlé Crenshaw</li>
  <li>Angela Y. Davis</li>
  <li>Bernardine Evaristo</li>
  <li>Audre Lorde</li>
  <li>Cathy Park Hong</li>
  <li>Zoya Patel</li>
  <li>Juno Mac</li>
  <li>Molly Smith</li>
  <li>Tara Westover</li>
</ul>

CSS

Зададим списку тип контейнера flex, создав колонки с помощью краткой записи flex-flow и установив значение row для свойства flex-direction. Укажем column-rule-width с десятью значениями <line-width>, каждое из которых больше предыдущего.

ul {
  display: flex;
  flex-flow: row;
  list-style-type: none;
  column-rule-style: solid;
  column-rule-color: teal;

  column-rule-width: 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px;
}

Результат

Поскольку значений (10) больше, чем промежутков (8), значения 9px и 10px не используются.

Свойство gap по умолчанию имеет значение normal, которое во flexbox соответствует 0. Свойство column-rule-width задаёт только ширину нарисованной линии и не влияет на макет. Линии рисуются позади содержимого.

Повторяющиеся значения

В этом примере показано, как значения повторяются, если в списке ширин значений меньше, чем правил колонок.

Используя те же HTML и CSS, что и в предыдущем примере, укажем в качестве значения column-rule-width три ширины, разделённые запятыми:

ul {
  column-rule-width: 1px, 5px, 10px;
}

Результат

Использование функции repeat()

В этом примере показано использование функции repeat() в значении свойства column-rule-width и то, как эта функция помогает сократить запись значений.

Используем те же HTML и CSS, что и в предыдущих примерах. Чтобы показать, насколько громоздкими могут быть значения и чем полезна функция repeat(), объявим два пользовательских свойства и используем их в вызовах функции repeat(). Функция repeat() задаёт повторение списка из двух значений <line-width> три раза.

ul {
  --base: 0.5vw;
  --secondary: 1vw;
  column-rule-width:
    15px,
    repeat(
      4,
      min(calc(var(--secondary) + 3px), 10px),
      abs(calc(var(--base) - 2px))
    ),
    15px;
}

Результат

Контейнер flex содержит девять колонок, а значит, восемь промежутков. Функция repeat() повторяет два значения ширины четыре раза, создавая список из десяти значений ширины. Поскольку промежутков между колонками меньше, чем всего значений ширины, последние два значения списка отбрасываются.

Использование auto внутри repeat()

В этом примере показано использование auto вместо целого числа в функции repeat().

С помощью repeat(auto, <line-width>) зададим всем правилам колонок значение 1px, кроме первого и последнего, которым зададим значение 5px.

ul {
  column-rule-width: 5px, repeat(auto, 1px), 5px;
}

Результат

@layer no-support {
  @supports not (column-rule-width: thin, thick) {
    body::before {
      content: "Your browser doesn't support the column-rule-width property";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

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

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

См. также

• column-rule-color
• column-rule-style
• column-rule — краткая запись
• row-rule-width
• rule-width — краткая запись
• rule — краткая запись
• Промежутки в CSS — модуль