Why are items in my grid moving?


I have a grid that is 20 rows by 30 columns, all evenly divided using repeat(20, 1fr) and repeat(30, 1fr).

I assigned one element to grid-area: 3 / 7 / 6 / 24; and it appeared to be in the correct location.

I then assigned another element to grid-area: 10 / 7 / 14 / 24; which should be below my first item.

HOWEVER, when I refreshed my webpage this second item had pushed the position of my first to a different location.

How can this be?


Three things would be helpful here, starting with a link to the exercise. Please copy the URL from the location bar of that page and paste into a reply. Thanks.

Second, we need to examine your actual code. We cannot see it at that link, but can test it in our own profile workspace, given we are on the same page. Plus it gives us an opportunity to comment and advise.

Third, and optional, though it is helpful, a screenshot of the output to the screen so we can relate better to your question about shifting of the grid components.


We see you have another post on the Grid subject. Is it the same lesson or a different one? If it is different, go back and add the lesson link and your code so we don’t have to go through this whole charade again. Thanks.

If the question relates to this same lesson, then we can merge the two questions into a single topic so it’s simpler for you to bookmark.


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.