<section>Section 1</section>
<section>Section 2</section>
<section>Section 3</section>
<section>Section 4</section>
html {
  display: grid;
  height: 100%;
  overflow: hidden;
}
body {
  display: grid;
  grid-auto-rows: 100%;
  gap: 1em;
  scroll-snap-type: y mandatory;
  overflow: auto;
}
section {
  background: lightblue;
  padding: 1em;
  font-size: 20px;
  scroll-snap-align: start;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.