::column

When CSS multi-column layout is used to lay out a container's content in multiple columns (for example, using the column-count property), a ::column pseudo-element is generated to contain each individual column.

This is useful for CSS carousels — ::column can be used to generate ::scroll-marker pseudo-elements for each column, and set them as snap targets using CSS scroll snap.

Beyond that, the styling that can be applied to ::column is very limited, but may be expanded in the future.

This demo creates a responsive, CSS-only carousel. It uses the columns property and the ::columns pseudo-element to create arbitary content columns that span the full width of their parent scroll container, which can be scrolled between. Each column contains multiple items of content, which can vary in number depending on the viewport width.

HTML

The HTML consists of an unordered list, with each list item containing some sample content:

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

<h1>CSS carousel multiple items per page</h1>
<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

* {
  box-sizing: border-box;
}

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

h1 {
  text-align: center;
  font-size: 1.7rem;
}

The list is given a fixed height and a width of 100vw to make it span the full width of the viewport. An overflow-x value of scroll is then set so that the content will scroll horizontally, and CSS scroll snap is used to snap to each item or "page" — a scroll-snap-type value of x mandatory is used to make the list into a scroll snap container. Finally, a columns value of 1 is set to force the list contents to display as a single column. A text-align value of center is also applied, to force the contents to align with the center of the list.

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

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

  columns: 1;
  text-align: center;
}

The list items are then styled:

• A display value of inline-block is set to force the list items to sit alongside one another and make the list scroll horizontally.
• A fixed aspect-ratio of 3/4 has been set on them, to control their sizing as the list size changes, but keep their width constant while the height of the list stays constant.
• A text-align value of left is set on them to override the text-align: center set on the parent container, so the item content will be left-aligned.
• Every even-numbered list item is given a different background-color via :nth-child(), so that it is easier to see the scrolling effect.

li {
  list-style-type: none;

  display: inline-block;
  height: 100%;
  aspect-ratio: 3/4;

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

  text-align: left;
}

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

The scroll-snap-align property is set on the ::column pseudo-elements — which represent the content columns generated by the columns property — so that when scrolled, the list snaps to each complete column.

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

ul::scroll-button(*) {
  border: 0;
  font-size: 2rem;
  background: none;
  color: rgb(0 0 0 / 0.7);
  cursor: pointer;
}

ul::scroll-button(*):hover,
ul::scroll-button(*):focus {
  color: rgb(0 0 0 / 1);
}

ul::scroll-button(*):active {
  translate: 1px 1px;
}

ul::scroll-button(*):disabled {
  color: rgb(0 0 0 / 0.2);
}

ul::scroll-button(left) {
  content: "◄";
}

ul::scroll-button(right) {
  content: "►";
}

ul {
  anchor-name: --myCarousel;
}

ul::scroll-button(*) {
  position: absolute;
  position-anchor: --myCarousel;
}

ul::scroll-button(left) {
  right: calc(anchor(left) - 70px);
  bottom: calc(anchor(top) + 13px);
}

ul::scroll-button(right) {
  left: calc(anchor(right) - 70px);
  bottom: calc(anchor(top) + 13px);
}

ul {
  scroll-marker-group: after;
}

ul::scroll-marker-group {
  position: absolute;
  position-anchor: --myCarousel;
  top: calc(anchor(bottom) - 70px);
  justify-self: anchor-center;
  display: flex;
  justify-content: center;
  gap: 20px;
}

We then select the ::scroll-marker pseudo-elements of each generated column using ul::column::scroll-marker. The look of each one is handled by setting width, height, background-color, border, and border-radius, but we also need to set a non-none value for the content property so they are actually generated.

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

Finally, we set a solid black background on the the active scroll marker using :target-current, so you can see the current carousel scroll position:

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

Result

See Creating CSS carousels for a full explanation of the above demo.

• scroll-marker-group
• ::scroll-button()
• ::scroll-marker
• ::scroll-marker-group
• :target-current
• Creating CSS carousels
• CSS overflow module
• CSS Carousel Gallery via chrome.dev (2025)