## Vertikaler Scroll-Snap `index.html` und `style.css` wurden bereits in der VM bereitgestellt. Dieser Code erstellt einen scrollbaren Container, der beim Scrollen an Elementen hakt. Um diesen Effekt zu erzielen, werden die folgenden Schritte durchgeführt: 1. `display: grid` und `grid-auto-flow: row` werden verwendet, um eine vertikale Layout zu erstellen. 2. `scroll-snap-type: y mandatory` und `overscroll-behavior-y: contain` werden verwendet, um den Snap-Effekt beim vertikalen Scroll zu erzeugen. 3. `scroll-snap-align` mit `start`, `stop` oder `center` kann verwendet werden, um die Snap-Ausrichtung zu ändern. Hier ist der HTML- und CSS-Code: ```html

``` ```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; } ``` Bitte klicken Sie in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte **Web 8080** aktualisieren, um die Webseite anzuschauen.