# Горизонтальная прокрутка карточек

Хороший пример реализации горизонтальной прокрутки карточек с использованием CSS:

{% embed url="https://www.youtube.com/watch?v=3yfswsnD2sw" %}
Horizontal scrolling
{% endembed %}

Он позволяет прокручивать карточки с фиксацией по самой карточке.

## Код

```html
<div class="list">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
</div>
```

```css
.list {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
}

.list > * {
  scroll-snap-align: start;
}
```
