I have not used grid much yet so this may be an issue related to moi.
In this project I have a 6 column grid yet there is an additional column coming up on the right.
The extra columns are being created when I try to change sizing of an existing column. Instead of changing the column a new one is being created. edit: The new columns do not show up in the edit grid panel and can’t be deleted.
It seems to work correctly in an incognito window. However I can’t delete the existing phantom columns. This isn’t major today I am just starting this project.
Thanks for posting about this — it definitely looks like odd behavior.
I did some testing on this end. I’m not able to reproduce the issue in a new site but can definitely see the weird ghost column in your project. I’ve pinged our Grid team on this to see what we can do to help here.
I’ll be sure to post back here with an update when I have one for you.
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 .
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:
Thanks @Brando. I should have seen that bottom div in the overflow track. Sorry for wasting your time. You guys have done a mint job on making grid so user friendly.
Thanks 