Why is the last row of elements displaced in my css grid?

Question

I was testing scroll snapping and I noticed something about my grid.

* {
  margin: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(10, calc((100vw - 2rem) / 3 - ((100vw - 100%) / 3)));
  grid-template-rows: repeat(10, calc((90vh) - ((90vh - 100%))));
  grid-gap: 1rem;
  list-style: none;
  padding: 1rem;
  margin: 0;
  height: 90vh;
  overflow: scroll;
  scroll-snap-type: both mandatory;
  scroll-padding: 1rem;
}

.card {

  scroll-snap-align: start;
  border-radius: 3px;
  background: red;
}

<ul class="grid">
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
</ul>

I calculate column sizes by subtracting the outside padding from the viewport width((100vw - 2rem)) and then subtracting the size of the vertical scrollbars((100vw - 100%)). Same for rows only that i don't need to subtract the padding here for it to fit in the viewport.

If you scroll all the way to the end, you can see that there is no padding-bottom or padding-right visible. If you inspect it, you can see that the last row of elements displaced by 1rem upwards and 1rem to the left. You can also see that the padding is behind the scrollbars.

Why is this happening?

Answer 1

Found a solution, though not super elegant.

.child:after {
    content: "";
    display: block;
    position: absolute;
    right: -2rem;
    width: 2rem;
    height: 1px;
}

It looks like padding and margins are ignored in overflowing containers, so to add margin or padding to the right and bottom sides of an overflowing container you have to simulate it using a pseudo-element that the browser can't ignore.

Source: https://blog.alexandergottlieb.com/overflow-scroll-and-the-right-padding-problem-a-css-only-solution-6d442915b3f4