in the @media, desktop, the grid is over extending for all of them except the Red nav area.
You’ll probably want
repeat(5, min-content) or
repeat(5, auto) for
grid-template-rows. Setting them to
1fr means all of them take the same size.
If they are 1fr and all the same size, would that cause the
<p> text to bleed out of the div if the text exceeded the space?
If all of them are 1fr, no text will bleed. It’s just that the row with the most text will expand as much as it needs to fit its contents, then the rest of the rows will expand as much
So the 1fr takes the largest element and sizes the others to be equal to it?
Only if all of them are 1fr as well