I spoke with the team and found the root cause of the issue here. Thankfully, it’s not a bug
This effect is something called Implicit grids within CSS Grid. Explicit tracks are the ones you actually create, implicit tracks are the ones that are created if the content within your grid spans past the available amount of columns on the grid. Here’s a quote from reference on this topic
If there are more grid items than cells in the grid or when a grid item is placed outside of the explicit grid, the grid container automatically generates grid tracks by adding grid lines to the grid. The explicit grid together with these additional implicit tracks and lines forms the so called implicit grid .
So in this case you have 6 “explicit” columns defined:
But you have an element inside of your grid called
bottom that spans from col 1 → col 7. Because an explicit 7th column doesn’t exist, a new implicit column was created:
So to fix this you can select the
bottom element and change it to span from 1 → 6 rather than 1 → 7.
Hope this helps!