Свойство CSS `row-rule-width`

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

Попробуйте

row-rule-width: thin;

row-rule-width: thin, thick;

row-rule-width: repeat(2, thin, thick), 10px;

row-rule-width: thick, repeat(auto, 1px, 2px), thick;

row-rule-width: medium;

<section id="default-example">
  <ul id="example-element">
    <li>One fish</li>
    <li>Two fish</li>
    <li>Red fish</li>
    <li>Blue fish</li>
  </ul>
</section>

#example-element {
  display: flex;
  flex-flow: column;
  row-rule-style: solid;
  row-rule-color: magenta;
  gap: 5px;
  text-align: left;
}

Синтаксис

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

/* Length values */
row-rule-width: 1px;
row-rule-width: 5px;
row-rule-width: 1px, 3px, 5px;
row-rule-width: 5px, repeat(auto, 1px), 10px, 15px;
row-rule-width: 5px, repeat(5, 1px, 3px), 5px;

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

Значения

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

<line-width>

Значение <line-width>: это может быть одно из ключевых слов thin, medium или thick либо положительное значение <length>, задающее ширину линии. Значение по умолчанию — medium.

<repeat-line-width>

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

<auto-repeat-line-width>

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

Описание

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

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

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

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

row-rule-width: 3px;

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

row-rule-width: thin, 1em;

Повторяющиеся ширины линий

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

row-rule-width: 1rem, thick, thin, thick, thin;
row-rule-width: 1rem, repeat(2, thick, thin);

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

Если задать --base: 1vh и --secondary: 1vw, следующий вариант даст результат, аналогичный предыдущему объявлению:

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

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

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

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

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

row-rule-width: thin, repeat(auto, medium), thin;

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

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

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

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

Примеры

Базовый пример

В этом примере мы задаём единую ширину для линий, нарисованных между flex-элементами.

HTML

Добавим список динамичных спортивных дуэтов:

<ul>
  <li>Simone Biles + Jonathan Owens</li>
  <li>Serena Williams + Venus Williams</li>
  <li>Aaron Judge + Giancarlo Stanton</li>
  <li>LeBron James + Dwyane Wade</li>
  <li>Xavi Hernandez + Andres Iniesta</li>
  <li>Kerri Walsh + Misty May Treanor</li>
</ul>

CSS

Сделаем список flex-контейнером, создав строки с помощью сокращённого свойства flex-flow, задав для flex-direction значение column. Добавим gap размером 5px, чтобы между строками было достаточно места для нашей 3px красной пунктирной линии:

ul {
  display: flex;
  flex-flow: column;
  gap: 5px;
  row-rule-style: dashed;
  row-rule-color: red;
  row-rule-width: 3px;
}

Результат

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

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

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

ul {
  row-rule-width: 1px, 3px, 5px;
}

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

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

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

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

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

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

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

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

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

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

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

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

См. также

• row-rule-color
• row-rule-style
• column-rule-width
• Сокращённое свойство row-rule
• Сокращённое свойство rule-width
• Сокращённое свойство rule
• Модуль CSS gaps