1. Web
  2. CSS
  3. Reference
  4. Properties
  5. column-rule-visibility-items

column-rule-visibility-items CSS property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Want more support for this feature? Tell us why.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The column-rule-visibility-items CSS property defines whether a column-rule segment is painted in gaps adjacent to empty areas.

Try it

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;
}

Syntax

css
/* 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;

Values

all

The column rule should be painted in all gap segments, regardless of whether adjacent areas contain an item.

around

The column rule should be painted in a gap segment if at least one of the two adjacent areas is occupied by a item.

between

The column rule should be painted in a gap segment if both adjacent areas are occupied by items.

normal

With grid containers, behaves the same as all. In multicol layout, behaves the same as between. This is the default.

Description

The column-rule-visibility-items property defines whether a column-rule segment is painted in column gaps adjacent to empty areas in multi-row and grid containers with more than one column.

The column-rule-visibility-items and row-rule-visibility-items properties can both be set using the rule-visibility-items shorthand.

Formal definition

Value not found in DB!

Formal syntax

column-rule-visibility-items = 
  all      |
  around   |
  between  |
  normal

Examples

Basic example

In this example, we define a column rule to be drawn between two grid areas if at least one adjacent grid area contains a grid item.

HTML

We include a list of dynamic sports duos:

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

We define the ordered list (<ol>) to be a grid container, creating 4 columns and 4 rows by setting both the grid-template-columns and grid-template-rows properties to repeat(4, 1fr), and move the last item to the bottom-right grid area using grid-column and grid-row properties. We include a gap of 20px to provide enough room between the columns to fit our 5px dashed rule.

Finally, we set column-rule-visibility-items to between, so that a column rule is painted in a column gap only if both adjacent grid areas contain a grid item.

css
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;
}

Result

Specifications

Specification
CSS Gaps Module Level 1
# propdef-column-rule-visibility-items

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content