https://codepen.io/Adamemaley/pen/pOEgdP
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.
1 Like
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
1 Like
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
1 Like