::column

Syntax

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

Beschreibung

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

Das ::column Pseudoelement akzeptiert nur Eigenschaften zum Scrollen von Elementen innerhalb eines Scroll-Containers, 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. Wenn ::column::scroll-marker angewendet wird, wird für jede Spalte des ursprünglichen Scroll-Containers ein Marker erstellt, wobei die ::scroll-marker Pseudoelemente vom ursprünglichen Element des ::column Pseudoelements erben und nicht vom ::column selbst.

Dies ist nützlich für CSS Karussells — ::column kann verwendet werden, um ::scroll-marker Pseudoelemente für jede Spalte zu generieren und diese als Snap-Ziele mit CSS Scroll Snap festzulegen.

Obwohl die Gestaltungsmöglichkeiten von ::column derzeit sehr begrenzt sind, könnten sie in Zukunft erweitert werden. Jegliche zukünftigen unterstützten Eigenschaften und Werte werden auf diejenigen beschränkt sein, die das Layout nicht beeinflussen.

Beispiele

Scrollendes Spaltenlayout

Dieses Beispiel erstellt einen responsiven Container, der jede "Seite" des Inhalts einrastet. Es verwendet die columns Eigenschaft und das ::columns Pseudoelement, um Inhaltsäulen zu erstellen, die die gesamte Breite ihres übergeordneten Scroll-Containers überspannen und horizontal scrollbar sind. Jede Spalte enthält ein oder mehrere Listenelemente, die sich je nach Ansichtsfensterbreite in der Anzahl unterscheiden.

HTML

Der HTML-Code besteht aus einer ungeordneten Liste, wobei jedes Listenelement etwas Beispielinhalt 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, um sie über die gesamte Breite des Ansichtsfensters zu spannen. 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 schnappen — ein scroll-snap-type Wert von x mandatory wird verwendet, um die Liste in einen Scroll Snap Container zu verwandeln. Schließlich wird ein columns Wert von 1 festgelegt, um die Listeninhalte als einzelne Spalte anzuzeigen. Ein text-align Wert von center wird ebenfalls angewendet, um den Inhalt in der Mitte der Liste zu zentrieren.

* {
  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 wie folgt gestaltet:

• Ein display Wert von inline-block wird gesetzt, um die Listenelemente nebeneinander anzuordnen und die Liste horizontal scrollen zu lassen.
• Eine feste width und height wird auf sie angewendet.
• Ein text-align Wert von left wird auf sie angewendet, um die text-align: center Einstellung des übergeordneten Containers zu überschreiben, sodass der Elementinhalt linksbündig ist.
• Jedes gerade Listenelement erhält über :nth-child() eine andere Hintergrundfarbe, damit der Scrolleffekt leichter zu erkennen ist.

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 Pseudoelemente gesetzt — die die durch die columns Eigenschaft generierten Inhaltsäulen repräsentieren — sodass beim Scrollen eine Spalte zentriert im Scroll Container einrastet.

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

Ergebnis

Spaltenbasiertes Karussell mit Scroll-Markern

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

CSS

Wir erstellen eine Scroll-Marker-Gruppe mit der scroll-marker-group Eigenschaft und platzieren die Gruppe nach allen Inhalten:

ul {
  scroll-marker-group: after;
}

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

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

Schließlich verwenden wir das ::scroll-marker Pseudoelement, um für jedes Listenelement einen runden, transparenten Marker mit einem schwarzen Rand zu erstellen und stilisieren den Marker des aktuell gescrollten Elements anders als die anderen, 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 sich in der Paginierung befinden. Versuchen Sie auch, zur Scroll-Marker-Gruppe zu springen und dann die Cursortasten zu verwenden, um durch jede Seite zu navigieren.

Siehe Erstellung von CSS Karussells für weitere Karussell-Beispiele.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• columns
• ::scroll-marker
• ::scroll-marker-group
• :target-current
• Erstellung von CSS Karussells
• CSS-Multispalten-Layout Modul
• CSS Overflow Modul
• CSS Carousel Gallery via chrome.dev (2025)