CSS-свойство `row-rule-visibility-items`

CSS-свойство row-rule-visibility-items определяет, рисуется ли сегмент линии строки в промежутках, примыкающих к пустым областям.

Попробуйте

row-rule-visibility-items: all;

row-rule-visibility-items: around;

row-rule-visibility-items: between;

row-rule-visibility-items: normal;

<section id="default-example">
  <section id="example-element">
    <p>One fish</p>
    <p>Two fish</p>
    <p>Red fish</p>
    <p>Blue fish</p>
    <cite>-- Dr. Seuss</cite>
  </section>
</section>

#example-element {
  display: grid;
  row-rule: solid 5px red;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
cite {
  grid-column: 3;
  grid-row: 3;
}

Синтаксис

/* Keywords */
row-rule-visibility-items: all;
row-rule-visibility-items: around;
row-rule-visibility-items: between;
row-rule-visibility-items: normal;

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

Значения

Для этого свойства указывается одно из следующих ключевых слов:

all

Линия строки должна рисоваться во всех сегментах промежутков, независимо от того, содержат ли смежные области элементы.

around

Линия строки должна рисоваться в сегменте промежутка, если хотя бы одна из двух смежных областей занята элементом.

between

Линия строки должна рисоваться в сегменте промежутка, если обе смежные области заняты элементами.

normal

Ведёт себя так же, как all. Это значение по умолчанию.

Описание

Свойство row-rule-visibility-items определяет, рисуются ли в контейнерах с несколькими колонками и с сеткой, содержащих более одной строки, сегменты линии строки в промежутках между двумя смежными областями, если одна или обе области пусты.

Для свойств row-rule-visibility-items и column-rule-visibility-items можно задать одинаковые значения с помощью сокращённого свойства rule-visibility-items.

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

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

Примеры

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

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

HTML

Мы добавляем список знаменитых спортивных дуэтов:

<ol>
  <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>
</ol>

CSS

Мы задаём упорядоченному списку (<ol>) отображение в виде контейнера сетки, создавая 4 строки и 4 столбца, задав для свойств grid-template-rows и grid-template-columns значение repeat(4, 1fr), а последний элемент перемещаем в нижнюю правую область сетки с помощью свойств grid-row и grid-column. Мы задаём значение gap, равное 20px, чтобы между строками было достаточно места для нашей штриховой линии 5px.

Наконец, мы задаём для row-rule-visibility-items значение around, чтобы сегмент линии строки рисовался в промежутке между строками только в том случае, если одна или обе смежные области сетки содержат элемент сетки.

ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;

  row-rule: dashed 5px blue;
  row-rule-visibility-items: around;
}
li:last-child {
  grid-column: 4;
  grid-row: 4;
}

li {
  margin-left: 1em;
}
@layer no-support {
  @supports not (row-rule-visibility-items: around) {
    body::before {
      content: "Your browser doesn't support the row-rule-visibility-items property";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

Результат

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

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

См. также

• сокращённое свойство rule-visibility-items
• column-rule-visibility-items
• сокращённое свойство row-rule
• сокращённое свойство rule
• модуль промежутков CSS