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

row-rule — CSS-свойство сокращённой записи, задающее ширину, стиль и цвет линии, нарисованной между рядами в многострочных макетах grid, flex и multicol.

Попробуйте

row-rule: solid;

row-rule: dotted medium blue;

row-rule:
  dotted medium blue,
  repeat(3, dashed magenta 1px, outset green 5px);

row-rule:
  dotted medium blue,
  repeat(auto, dashed magenta 1px, dashed magenta 5px),
  dotted medium blue;

row-rule:
  dotted medium blue,
  repeat(auto, dashed magenta 1px),
  outset green 5px;

<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;
  gap: 7px;
  text-align: left;
}

Составные свойства

Это свойство является сокращённой записью следующих свойств CSS:

• row-rule-color
• row-rule-style
• row-rule-width

Синтаксис

/* One value */
row-rule: dotted;
row-rule: solid 8px;
row-rule: solid blue;
row-rule: thick inset blue;

/* Multiple values */
row-rule: groove, dashed, solid;
row-rule:
  dotted medium blue,
  dashed magenta 1px,
  outset green 5px;
row-rule:
  solid #0ff,
  repeat(3, dashed magenta 1px, outset green 5px);
row-rule:
  inset 3px yellow,
  repeat(auto, dashed magenta 1px, groove green 5px);

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

Значения

Значение этого свойства задаётся списком значений, разделённых запятыми. Каждое значение может иметь один из следующих типов:

<gap-rule>

Задаётся одним, двумя или тремя значениями из приведённого ниже списка в любом порядке.

<'line-width'>

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

<'line-style'>

<line-style>: одно из значений none, hidden, dotted, dashed, solid, double, groove, ridge, inset или outset. Значение по умолчанию — none. См. row-rule-style.

<'color'>

Значение color, представляющее цвет линии. Значение по умолчанию — currentcolor. См. row-rule-color.

<gap-repeat-rule>

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

<gap-auto-repeat-rule>

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

Описание

Свойство row-rule задаёт стиль линий правил, нарисованных в промежутках между рядами в контейнерах многоколоночной вёрстки, flex и grid, содержащих более одного ряда.

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

Значение свойства представляет собой список компонентов, разделённых запятыми; он может включать типы <gap-rule>, <gap-repeat-rule> и <gap-auto-repeat-rule>. Каждый <gap-rule> задаёт ширину, цвет и стиль одной или нескольких линий правил.

Если значение свойства состоит только из одного <gap-rule>, все линии правил рядов будут иметь этот стиль. Если объявить следующее, все линии правил рядов будут dashed red 3px:

row-rule: dashed red 3px;

Если объявлено несколько значений <gap-rule>, они применяются к правилам рядов в указанном порядке. Если промежутков между рядами больше, чем значений <gap-rule>, список значений повторяется, пока для каждого правила ряда не будет задана линия. Например, если объявить следующее, каждое нечётное правило будет dashed red 3px, а каждое чётное — dotted blue 5px.

row-rule:
  dashed red 3px,
  dotted blue 5px;

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

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

row-rule:
  solid red 5px,
  outset blue 10px,
  inset green 1px,
  outset blue 10px,
  inset green 1px,
  outset blue 10px,
  inset green 1px;
row-rule:
  solid red 5px,
  repeat(3, outset blue 10px, inset green 1px);

В результате создаётся список из семи правил. Если число стилей в списке стилей значения row-rule превышает количество промежутков между рядами, лишние значения стилей игнорируются. Если контейнер, к которому применяется свойство, содержит три ряда, правило в первом промежутке будет solid red 5px, а во втором — outset blue 10px.

Если промежутков больше, чем стилей, список стилей повторяется. Если контейнер содержит 8, 15, 22 или 29 рядов, эта последовательность стилей повторится соответственно один, два, три или четыре раза; последним правилом будет inset green 1px.

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

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

row-rule:
  solid red 5px,
  repeat(auto, dotted green 1px, dashed blue 1px),
  solid red 5px;

В этом случае первое и последнее правила рядов будут solid red 5px, а все остальные будут чередоваться между dotted green 1px и dashed blue 1px. Не имеет значения, содержит ли контейнер 3, 6, 11, 16 или 21 ряд: между первым и последним промежутками всегда будет нарисована толстая сплошная красная линия (если только row-rule-visibility-items не приводит к тому, что линия не рисуется), а все остальные линии правил рядов будут тонкими зелёными пунктирными или синими штриховыми линиями. Если рядов всего 2 или 3, пунктирных и штриховых линий не будет.

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

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

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

Примеры

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

В этом примере мы задаём одно правило для линий, нарисованных между 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, установив значение column для свойства flex-direction. Добавим gap размером 5px, чтобы между рядами было достаточно места для правила 3px dashed red:

ul {
  display: flex;
  flex-flow: column;
  gap: 5px;

  row-rule: 3px red dashed;
}

Результат

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

В этом примере показано, как значения повторяются, если в списке стилей значений меньше, чем правил рядов. Также показаны значения ширины, цвета и стиля по умолчанию для medium, currentcolor и none соответственно.

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

ul {
  row-rule:
    red dashed,
    1px dotted,
    5px blue,
    10px magenta solid;
}

Красная линия имеет ширину 3px, пунктирная линия имеет тот же цвет, что и текст, а синяя линия шириной 5px не отображается, поскольку стиль третьего <gap-rule> по умолчанию равен none, поэтому линия не рисуется.

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

В этом примере показано использование функции repeat() в значении свойства row-rule. Мы используем тот же HTML и CSS, что и в предыдущих примерах. Добавим функцию repeat(), задав список из двух значений <gap-rule>, который повторяется 3 раза.

ul {
  row-rule:
    3px red dashed,
    repeat(3, dotted green 1px, dashed blue 1px),
    3px red dashed;
}

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

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

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

Используя repeat(auto, <gap-rule>), мы задаём для всех правил рядов значение 1px dotted, а цветом по умолчанию устанавливаем текущий цвет, за исключением первого и последнего правил, для которых задаём 3px solid red.

ul {
  row-rule:
    3px red solid,
    repeat(auto, 1px dotted),
    3px red solid;
}

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

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

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

См. также

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