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

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

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

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

• column-rule-visibility-items
• row-rule-visibility-items

Попробуйте

rule-visibility-items: all;

rule-visibility-items: around;

rule-visibility-items: between;

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;
  rule: solid 5px red;
  gap: 10px;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
}
cite {
  grid-row: 3;
  grid-column: 3;
}

Синтаксис

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

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

Значения

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

all

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

around

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

between

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

normal

В контейнерах grid ведёт себя так же, как all. При многоколоночной компоновке ведёт себя так же, как between. Это значение по умолчанию.

Описание

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

Значение — это одно ключевое слово, которое задаёт одинаковое значение для свойств column-rule-visibility-items и row-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>) контейнером grid, создав 4 столбца и 4 строки, задав значения repeat(4, 1fr) для свойств grid-template-columns и grid-template-rows, а последний элемент переместим в правую нижнюю область сетки с помощью свойств grid-column и grid-row. Зададим gap равным 20px, чтобы между столбцами было достаточно места для наших разделительных линий 5px. Для разделительных линий столбцов зададим значение dashed, а для разделительных линий строк — solid.

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

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

  column-rule: dashed 5px blue;
  row-rule: solid 5px red;

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

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

Результат

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

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

См. также

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