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

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

Werte

all

Die Spaltenregel sollte in allen Lückensegmenten gemalt werden, unabhängig davon, ob die angrenzenden Bereiche ein Element enthalten.

around

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

between

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

normal

Bei Grid-Containern verhält es sich genauso wie all. Im Mehrspalten-Layout verhält es sich genauso wie between. Dies ist der Standardwert.

Beschreibung

Die Eigenschaft column-rule-visibility-items definiert, ob ein Segment der Spaltenregel in Säulenzwischenräumen gemalt wird, die an leere Bereiche in Mehrspalten und Grid Containern mit mehr als einer Spalte angrenzen.

Die Eigenschaften column-rule-visibility-items und row-rule-visibility-items können beide mit der Abkürzung rule-visibility-items gesetzt werden.

Formale Definition

Formale Syntax

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

Beispiele

Einfaches Beispiel

In diesem Beispiel definieren wir eine Spaltenregel, die zwischen zwei Grid-Bereichen gezeichnet wird, wenn mindestens ein angrenzender Grid-Bereich ein Grid-Element enthält.

HTML

Wir fügen eine Liste dynastischer 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, indem wir sowohl die Eigenschaften grid-template-columns und grid-template-rows auf repeat(4, 1fr) setzen, um 4 Spalten und 4 Zeilen zu erstellen, und bewegen das letzte Element in den unteren rechten Grid-Bereich mit Hilfe der Eigenschaften grid-column und grid-row. Wir fügen einen gap von 20px hinzu, um genügend Platz zwischen den Spalten zu schaffen, damit unsere 5px gestrichelte Regel passt.

Schließlich setzen wir column-rule-visibility-items auf between, sodass eine Spaltenregel nur dann in einem Säulenzwischenraum gemalt 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

• rule-visibility-items Abkürzung
• row-rule-visibility-items
• column-rule Abkürzung
• rule Abkürzung
• CSS Lücken Modul