CSS Grid Item Overflow

HTML-CSS
1

I was hoping to get a better understanding as to why when I include this code, it causes the grid-item to stay outside the grid container.

grid-template-rows: 1fr 5fr;
gap: 5% 2%;

When I include this code it stays within the container’s boundaries.

grid-template-rows: 20% 75%;
gap: 5% 2%;

I know for the last code it equals 100%, but wouldn’t the fr unit do the same so that it will also be equal to 100%. I am still learning how to use flexbox and CSS grid.

2

Take a look at this article on stack overflow. It is not the exact same question but it explains issues with using percentage. Most likely your answer lies in there.