diff --git a/snippets/horizontal-scroll-snap.md b/snippets/horizontal-scroll-snap.md
new file mode 100644
index 000000000..5f4455d48
--- /dev/null
+++ b/snippets/horizontal-scroll-snap.md
@@ -0,0 +1,49 @@
+---
+title: Horizontal scroll snap
+tags: interactivity,intermediate
+---
+
+Creates a scrollable container that will snap on elements when scrolling.
+
+- Use `display: gird` and `grid-auto-flow: column` to create a horizontal layout.
+- Use `scroll-snap-type: x mandatory` and `overscroll-behavior-x: contain` to create a snap effect on horizontal scroll.
+- You can use `scroll-snap-align` with either `start`, `stop` or `center` to change the snap alignment.
+
+```html
+<div class="horizontal-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
+.horizontal-snap {
+  margin: 0 auto;
+  display: grid;
+  grid-auto-flow: column;
+  gap: 1rem;
+  height: calc(180px + 1rem);
+  padding: 1rem;
+  width: 480px;
+  overflow-y: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+}
+
+.horizontal-snap > a {
+  scroll-snap-align: center;
+}
+
+.horizontal-snap img {
+  width: 180px;
+  object-fit: contain;
+  border-radius: 1rem;
+}
+```
diff --git a/snippets/vertical-scroll-snap.md b/snippets/vertical-scroll-snap.md
new file mode 100644
index 000000000..ea8ed5bab
--- /dev/null
+++ b/snippets/vertical-scroll-snap.md
@@ -0,0 +1,49 @@
+---
+title: Vertical scroll snap
+tags: interactivity,intermediate
+---
+
+Creates a scrollable container that will snap on elements when scrolling.
+
+- Use `display: gird` 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;
+}
+```