<section>Section 1</section>
<section>Section 2</section>
<section>Section 3</section>
<section>Section 4</section>
<section>Section 5</section>
<section>Section 6</section>
<section>Section 7</section>
<section>Section 8</section>
html {
  display: grid;
  height: 100%;
  overflow: hidden;
}
body {
  --n: 2;   /* the number of sections */
  --g: 1em; /* the gap */
  display: grid;

  gap: var(--g);
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--n) - 1)*var(--g))/var(--n));
  scroll-snap-type: x 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.