::column

Wenn ein CSS Mehrspalten-Layout verwendet wird, um den Inhalt eines Containers in mehreren Spalten anzuordnen (zum Beispiel durch die Verwendung der column-count Eigenschaft), werden ::column Pseudoelemente generiert, um jede einzelne Spalte zu enthalten.

Das ::column Pseudoelement 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 Pseudoelement kann ein ::scroll-marker Pseudoelement haben. Andere Pseudoelemente wie ::before und ::after werden auf ::column nicht generiert. Durch die Anwendung von ::column::scroll-marker wird für jede Spalte des ursprungsbezogenen Scroll-Containers ein Marker erstellt, wobei die ::scroll-marker Pseudoelemente vom ursprungsbezogenen Element des ::column Pseudoelements erben und nicht von ::column selbst.

Dies ist nützlich für CSS Karusselle — ::column kann verwendet werden, um ::scroll-marker Pseudoelemente für jede Spalte zu generieren und sie als Snap-Ziele mittels CSS Scroll Snap zu setzen.

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

Dieses Beispiel erstellt einen responsiven Container, der jede "Seite" des Inhalts einrastet. Es verwendet die columns Eigenschaft und das ::columns Pseudoelement, um Inhaltsspalten zu erstellen, die die gesamte Breite ihres übergeordneten Scroll-Containers einnehmen, der horizontal scrollen kann. Jede Spalte enthält ein oder mehrere Listenelemente, deren Anzahl je nach Viewport-Breite variiert.

HTML

Der HTML-Code besteht aus einer unsortierten Liste, wobei jedes Listenelement einige Beispieldaten 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 zugewiesen, sodass sie die gesamte Breite des Viewports einnimmt. Ein overflow-x Wert von scroll wird dann gesetzt, damit der Inhalt horizontal scrollt, und CSS Scroll Snap wird verwendet, um zu jedem Element oder "Seite" zu snappen — ein scroll-snap-type Wert von x mandatory wird verwendet, um die Liste in einen Scroll-Snap-Container umzuwandeln. Schließlich wird ein columns Wert von 1 gesetzt, um den Listeninhalten anzuzeigen, dass sie als einzelne Spalte dargestellt werden sollen. Ein text-align Wert von center wird ebenfalls angewendet, um den Inhalt in 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 gestylt:

• Ein display Wert von inline-block wird gesetzt, um die Listenelemente nebeneinander zu stellen und die Liste horizontal zu scrollen.
• Eine feste width und height wird auf sie gesetzt.
• Ein text-align Wert von left wird auf sie angewendet, um das text-align: center des übergeordneten Containers zu überschreiben, sodass der Inhalt des Elements linksbündig ausgerichtet wird.
• Jedes gerade Listenelement erhält eine andere Hintergrundfarbe über :nth-child(), sodass der Scroll-Effekt leichter zu sehen ist.

li {
  list-style-type: none;

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

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

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

Die scroll-snap-align Eigenschaft wird auf die ::column Pseudoelemente gesetzt — die die durch die columns Eigenschaft generierten Inhaltsspalten repräsentieren — damit, wenn gescrollt wird, eine Spalte innerhalb des Scroll-Containers zentriert eingerastet wird.

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

Ergebnis

Erweiterung des vorhergehenden Beispiels: Wir werden Scrollmarker erstellen, um eine direkte Navigation zu verschiedenen Spalten zu ermöglichen, indem wir eine scroll-marker-group auf den Container anwenden und eine ::scroll-marker auf jedes ::column Pseudoelement. Der HTML-Code bleibt unverändert.

CSS

Wir erstellen eine Scroll-Marker-Gruppe mit der scroll-marker-group Eigenschaft und platzieren die Gruppe nach dem gesamten Inhalt:

ul {
  scroll-marker-group: after;
}

Wir wenden dann Stile auf das ::scroll-marker-group Pseudoelement an, um die Scrollmarker in der Mitte der Zeile mit einem 0.4em Abstand zwischen jedem anzuordnen:

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

Schließlich verwenden wir das ::scroll-marker Pseudoelement, um einen runden, transparenten Marker für jedes Listenelement mit einem schwarzen Rand zu erstellen, dann stylen wir den Marker des aktuell gescrollten Elements anders als die anderen und zielen den Marker mit der :target-current Pseudoklasse an:

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 Scrollmarker zu drücken, um direkt zu jeder Seite zu springen. Beachten Sie, wie der aktuelle Marker hervorgehoben ist, damit Sie sehen können, wo Sie sich in der Pagination befinden. Versuchen Sie auch, zur Scroll-Marker-Gruppe zu tabben und dann die Cursor-Tasten zu verwenden, um durch jede Seite zu blättern.

Sehen Sie Erstellung von CSS-Karussellen für weitere Karussell-Beispiele.

• columns
• ::scroll-marker
• ::scroll-marker-group
• :target-current
• Erstellung von CSS-Karussellen
• CSS Mehrspalten-Layout Modul
• CSS Überlauf Modul
• CSS-Karussellgalerie über chrome.dev (2025)