CSS scroll snap is not working with CSS Grid

Question

When using CSS scroll snap with Flexbox the snapping works just fine:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.slider {
  font-family: sans-serif;
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(100vw);
  scroll-snap-type: x mandatory;
  display: flex;
  overflow-x: scroll;
}
section {
  border-right: 1px solid white;
  padding: 1rem;
  min-width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
  text-align: center;
  position: relative;
}
h1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: red;
  width: 100%;
  left: 0;
  font-size: calc(1rem + 3vw);
}

<div class="slider">
  <section>
    <h1>Section One</h1>
  </section>
  <section>
    <h1>Section Two</h1>
  </section>
  <section>
    <h1>Section Three</h1>
  </section>
  <section>
    <h1>Section Four</h1>
  </section>
  <section>
    <h1>Section Five</h1>
  </section>
</div>

However when trying to use CSS Grid with CSS Snap it just doesn't seem to work:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.slider {
  font-family: sans-serif;
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(100vw);
  scroll-snap-type: x mandatory;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 100vw);
  overflow-x: scroll;
  width: 600vw;
}
section {
  border-right: 1px solid white;
  padding: 1rem;
  min-width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
  text-align: center;
  position: relative;
}
h1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: red;
  width: 100%;
  left: 0;
  font-size: calc(1rem + 3vw);
}

<div class="slider">
  <section>
    <h1>Section One</h1>
  </section>
  <section>
    <h1>Section Two</h1>
  </section>
  <section>
    <h1>Section Three</h1>
  </section>
  <section>
    <h1>Section Four</h1>
  </section>
  <section>
    <h1>Section Five</h1>
  </section>
</div>

What is the reason for this behavior and is there a way to make CSS Grid work with CSS Snap?

Fredia

Maybe it's due to the fact that flex lines are unimpeded, but grid lines contain track walls? https://mcmap.net/q/225769/-aligning-grid-items-across-the-entire-row-column-like-flex-items-can/3597276 – Antoninaantonino

Answer 1

I think the issue is with the set width on the scroll container. After changing the width of the scroll container to auto and changing the grid-template-columns to repeat(5, 100vw) it worked for me:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.slider {
  font-family: sans-serif;
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(100vw);
  scroll-snap-type: x mandatory;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(5, 100vw);
  overflow-x: scroll;
}
section {
  border-right: 1px solid white;
  padding: 1rem;
  min-width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
  text-align: center;
  position: relative;
}
h1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: red;
  width: 100%;
  left: 0;
  font-size: calc(1rem + 3vw);
}

<div class="slider">
  <section>
    <h1>Section One</h1>
  </section>
  <section>
    <h1>Section Two</h1>
  </section>
  <section>
    <h1>Section Three</h1>
  </section>
  <section>
    <h1>Section Four</h1>
  </section>
  <section>
    <h1>Section Five</h1>
  </section>
</div>

I'm not sure why this happens but maybe someone else has an idea.

Leopardi

Answer 2

- What is the reason for this behavior ?

Don't have an answer to this first question.

- Is there a way to make CSS Grid work with CSS Snap ?

Yes, Max Kohler (in CSS Scroll Snapping tutorial) created a CSS grid with snapping, but he needed to use a JS standalone script named css-scroll-snap-polyfill for the snapping to work.

Link to the Codepen demo he created: https://codepen.io/maxakohler/pen/MBWJKm

To use his method you need to add this JS script to your website:

<script src="https://bundle.run/[email protected]"></script>

Then when the DOM is loaded call this JS function:

cssScrollSnapPolyfill()

And it should work like in his Codepen demo.

Mute