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

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

all

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

around

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

between

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

normal

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

Beschreibung

Die Eigenschaft column-rule-visibility-items definiert, ob ein Spaltenregelabschnitt in Spaltenlücken neben leeren Bereichen in mehrzeiligen und Raster Containern mit mehr als einer Spalte gezeichnet wird.

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

Formale Definition

Formale Syntax

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

Beispiele

Einfaches Beispiel

In diesem Beispiel definieren wir, dass eine Spaltenregel zwischen zwei Rasterbereichen gezeichnet wird, wenn mindestens ein angrenzender Rasterbereich ein Rasterelement 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 Rastercontainer, erstellen 4 Spalten und 4 Zeilen, indem wir sowohl die grid-template-columns als auch die grid-template-rows Eigenschaften auf repeat(4, 1fr) setzen, und verschieben das letzte Element in den unteren rechten Rasterbereich, indem wir die Eigenschaften grid-column und grid-row verwenden. Wir fügen einen gap von 20px hinzu, um genügend Platz zwischen den Spalten für unsere 5px gestrichelte Regel zu schaffen.

Schließlich setzen wir column-rule-visibility-items auf between, so dass eine Spaltenregel nur dann in einer Spaltenlücke gezeichnet wird, wenn beide angrenzenden Rasterbereiche ein Rasterelement 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 Kurzform
• row-rule-visibility-items
• column-rule Kurzform
• rule Kurzform
• CSS Lücken Modul