Prepare repository for merge

css/snippets/vertical-scroll-snap.md

@@ -0,0 +1,52 @@
+---
+title: Vertical scroll snap
+type: snippet
+tags: [interactivity]
+cover: baloons-field
+dateModified: 2020-08-18T14:25:46+03:00
+---
+
+Creates a scrollable container that will snap on elements when scrolling.
+
+- Use `display: grid` and `grid-auto-flow: row` to create a vertical layout.
+- Use `scroll-snap-type: y mandatory` and `overscroll-behavior-y: contain` to create a snap effect on vertical scroll.
+- You can use `scroll-snap-align` with either `start`, `stop` or `center` to change the snap alignment.
+
+```html
+<div class="vertical-snap">
+  <a href="#"><img src="https://picsum.photos/id/1067/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/122/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/188/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/249/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/257/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/259/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/283/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/288/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/299/640/640"></a>
+</div>
+```
+
+```css
+.vertical-snap {
+  margin: 0 auto;
+  display: grid;
+  grid-auto-flow: row;
+  gap: 1rem;
+  width: calc(180px + 1rem);
+  padding: 1rem;
+  height: 480px;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  scroll-snap-type: y mandatory;
+}
+
+.vertical-snap > a {
+  scroll-snap-align: center;
+}
+
+.vertical-snap img {
+  width: 180px;
+  object-fit: contain;
+  border-radius: 1rem;
+}
+```