::column

Syntax

::column {
  /* ... */
}

Beschreibung

Wenn das CSS-Mehrspaltenlayout verwendet wird, um den Inhalt eines Containers in mehreren Spalten anzuzeigen (zum Beispiel mit der column-count-Eigenschaft), werden ::column Pseudo-Elemente erzeugt, um jede einzelne Spalte zu enthalten.

Das ::column Pseudo-Element akzeptiert nur Scroll-Snap-Eigenschaften, die auf Elemente innerhalb eines Scroll-Containers angewendet werden, einschließlich scroll-margin, scroll-snap-align und scroll-snap-stop.

Das ::column Pseudo-Element kann ein ::scroll-marker Pseudo-Element haben. Andere Pseudo-Elemente wie ::before und ::after werden auf ::column nicht erzeugt. Das Anwenden von ::column::scroll-marker erzeugt einen Marker für jede Spalte des ursprünglichen Scroll-Containers, wobei die ::scroll-marker Pseudo-Elemente vom ursprünglich Element des ::column Pseudo-Elements erben, anstatt vom ::column selbst.

Dies ist nützlich für CSS-Karussells — ::column kann verwendet werden, um ::scroll-marker Pseudo-Elemente für jede Spalte zu erzeugen und sie als Snap-Ziele mittels CSS Scroll Snap einzustellen.

Obwohl die Stilgebung, die auf ::column angewendet werden kann, sehr begrenzt ist, könnte sie in Zukunft erweitert werden. Alle in Zukunft unterstützten Eigenschaften und Werte werden auf solche beschränkt sein, die das Layout nicht beeinflussen.

Beispiele

Scrollendes Spaltenlayout

Dieses Demo erstellt einen responsiven Container, der jede "Seite" von Inhalten einrastet. Es verwendet die columns-Eigenschaft und das ::column Pseudo-Element, um Inhaltsspalten zu erstellen, die die volle Breite ihres übergeordneten Scroll-Containers einnehmen, welcher horizontal gescrollt werden kann. Jede Spalte enthält einen oder mehrere Listenelemente, deren Anzahl je nach Ansichtsfensterbreite variiert.

HTML

Das HTML besteht aus einer ungeordneten Liste, wobei jedes Listenelement einige Beispielinhalte enthält:

<ul>
...
  <li>
    <h2>Item 1</h2>
  </li>
...
</ul>

<ul>
  <li>
    <h2>Item 1</h2>
  </li>
  <li>
    <h2>Item 2</h2>
  </li>
  <li>
    <h2>Item 3</h2>
  </li>
  <li>
    <h2>Item 4</h2>
  </li>
  <li>
    <h2>Item 5</h2>
  </li>
  <li>
    <h2>Item 6</h2>
  </li>
  <li>
    <h2>Item 7</h2>
  </li>
  <li>
    <h2>Item 8</h2>
  </li>
  <li>
    <h2>Item 9</h2>
  </li>
  <li>
    <h2>Item 10</h2>
  </li>
  <li>
    <h2>Item 11</h2>
  </li>
  <li>
    <h2>Item 12</h2>
  </li>
  <li>
    <h2>Item 13</h2>
  </li>
  <li>
    <h2>Item 14</h2>
  </li>
  <li>
    <h2>Item 15</h2>
  </li>
</ul>

CSS

Der Liste wird eine feste height und eine width von 100vw gegeben, um sie über die volle Breite des Ansichtsfensters zu spannen. Ein overflow-x-Wert von scroll wird dann gesetzt, sodass der Inhalt horizontal gescrollt wird, und CSS Scroll Snap wird verwendet, um zu jedem Element oder "Seite" einzurasten — ein scroll-snap-type-Wert von x mandatory wird verwendet, um die Liste zu einem Scroll-Snap-Container zu machen. Schließlich wird ein columns-Wert von 1 gesetzt, um den Listeninhalt als einzelne Spalte anzuzeigen. Ein text-align-Wert von center wird ebenfalls angewendet, um den Inhalt mit der Mitte der Liste auszurichten.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

ul {
  width: 100vw;
  height: 300px;
  padding: 10px;

  overflow-x: scroll;
  scroll-snap-type: x mandatory;

  columns: 1;
  text-align: center;
}

Die Listenelemente werden dann gestaltet:

• Ein display-Wert von inline-block wird gesetzt, um die Listenelemente nebeneinander zu platzieren und die Liste horizontal scrollen zu lassen.
• Eine feste width und height wurde auf sie gesetzt.
• Ein text-align-Wert von left wird auf sie gesetzt, um das text-align: center, das auf den übergeordneten Container gesetzt wurde, zu überschreiben, sodass der Elementinhalt linksbündig ist.
• Jedem geradzahligen Listenelement wird eine andere Hintergrundfarbe mittels :nth-child() gegeben, um den Scrolling-Effekt besser zu sehen.

li {
  list-style-type: none;

  display: inline-block;
  height: 100%;
  width: 200px;
  text-align: left;

  background-color: #eeeeee;
  outline: 1px solid #dddddd;
  padding: 0 20px;
  margin: 0 10px;
}

li:nth-child(even) {
  background-color: cyan;
}

Die scroll-snap-align-Eigenschaft wird auf die ::column Pseudo-Elemente gesetzt — die die Inhalts-Spalten repräsentieren, die durch die columns-Eigenschaft erzeugt werden — damit beim Scrollen eine Spalte in der Mitte des Scroll-Containers einrastet.

ul::column {
  scroll-snap-align: center;
}

Ergebnis

Auf Spalten basierendes Karussell mit Scroll-Markern

Aufbauend auf dem vorherigen Beispiel erstellen wir Scroll-Marker, um eine direkte Navigation zu verschiedenen Spalten zu ermöglichen, indem wir ein scroll-marker-group auf den Container und ein ::scroll-marker auf jedes ::column Pseudo-Element anwenden. Das HTML bleibt unverändert.

CSS

Wir erstellen eine Scroll-Marker-Gruppe mit der scroll-marker-group-Eigenschaft, indem wir die Gruppe hinter allen Inhalten platzieren:

ul {
  scroll-marker-group: after;
}

Wir wenden dann Stile auf das ::scroll-marker-group Pseudo-Element an, um die Scroll-Marker in der Mitte der Zeile mit einem 0.4em großen Abstand zwischen jedem anzuordnen:

::scroll-marker-group {
  display: flex;
  gap: 0.4em;
  place-content: center;
}

Schließlich verwenden wir das ::scroll-marker Pseudo-Element, um einen runden, transparenten Marker für jedes Listenelement mit einem schwarzen Rand zu erstellen und dann den Marker des aktuell gescrollten Elements anders als die anderen zu gestalten, indem der Marker mit der :target-current Pseudo-Klasse angesprochen wird:

ul::column::scroll-marker {
  content: "";
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 10px;
}

ul::column::scroll-marker:target-current {
  background-color: black;
}

Ergebnis

Versuchen Sie, die Scroll-Marker zu drücken, um direkt zu jeder Seite zu springen. Beachten Sie, wie der aktuelle Marker hervorgehoben wird, sodass Sie sehen können, wo Sie in der Paginierung sind. Versuchen Sie auch, zur Scroll-Marker-Gruppe zu tabben, und verwenden Sie dann die Pfeiltasten, um durch jede Seite zu blättern.

Weitere Karussellbeispiele finden Sie unter Creating CSS carousels.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• columns
• ::scroll-marker
• ::scroll-marker-group
• :target-current
• Creating CSS carousels
• CSS-Mehrspaltenlayout Modul
• CSS Overflow Modul
• CSS Carousel Gallery über chrome.dev (2025)