<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.