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

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

Попробуйте

column-rule-visibility-items: all;

column-rule-visibility-items: around;

column-rule-visibility-items: between;

column-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;
  column-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 */
column-rule-visibility-items: all;
column-rule-visibility-items: around;
column-rule-visibility-items: between;
column-rule-visibility-items: normal;

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

Значения

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

all

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

around

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

between

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

normal

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

Описание

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

Свойства column-rule-visibility-items и row-rule-visibility-items можно задать с помощью сокращённого свойства rule-visibility-items.

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

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

Примеры

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

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

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

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

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

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

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

Результат

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

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

См. также

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