column-rule-visibility-items CSS property

Probieren Sie es aus

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

/* Keyword values */
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;

Werte

Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:

all

Die Spaltenlinie sollte in allen Lückensegmenten gezeichnet werden, unabhängig davon, ob angrenzende Bereiche ein Element enthalten.

around

Die Spaltenlinie sollte in einem Lückensegment gezeichnet werden, wenn mindestens einer der beiden angrenzenden Bereiche von einem Element belegt ist.

between

Die Spaltenlinie sollte in einem Lückensegment gezeichnet werden, wenn beide angrenzenden Bereiche von Elementen belegt sind.

normal

Bei Grid-Containern verhält sich dieser Wert wie all. Im Mehrspaltenlayout verhält er sich wie between. Dies ist der Standardwert.

Beschreibung

Die Eigenschaft column-rule-visibility-items legt fest, ob ein column-rule-Segment in Spaltenlücken gezeichnet wird, die an leere Bereiche in mehrzeiligen- und Grid-Containern mit mehr als einer Spalte angrenzen.

Die Eigenschaften column-rule-visibility-items und row-rule-visibility-items können beide mithilfe der Kurzform rule-visibility-items festgelegt werden.

Formale Definition

Formale Syntax

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

Beispiele

Grundlegendes Beispiel

In diesem Beispiel legen wir fest, dass eine Spaltenlinie zwischen zwei Grid-Bereichen gezeichnet wird, wenn mindestens einer der angrenzenden Grid-Bereiche ein Grid-Element enthält.

HTML

Wir fügen eine Liste dynamischer Sportduos ein:

<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

Wir definieren die geordnete Liste (<ol>) als Grid-Container, erstellen durch Festlegen der Eigenschaften grid-template-columns und grid-template-rows auf repeat(4, 1fr) 4 Spalten und 4 Zeilen und verschieben das letzte Element mithilfe der Eigenschaften grid-column und grid-row in den Grid-Bereich unten rechts. Wir fügen ein gap von 20px hinzu, um zwischen den Spalten genügend Platz für unsere gestrichelte Linie mit 5px zu schaffen.

Schließlich setzen wir column-rule-visibility-items auf between, sodass eine Spaltenlinie nur dann in einer Spaltenlücke gezeichnet wird, wenn beide angrenzenden Grid-Bereiche ein Grid-Element enthalten.

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

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Kurzform rule-visibility-items
• row-rule-visibility-items
• Kurzform column-rule
• Kurzform rule
• Modul CSS gaps