Hi there community!
Struggling on this landing page assignment. I’m close to my intended outcome, at least for screen sizes larger than 1400px. However, I cannot get the grid rows to behave like I would like. In fact, in the current version, I have deleted the grid-template-rows completely, and the layout did not change one bit???
Here is a screenshot of current layout with gridlines showing, thanks to mozilla inspect element grid-feature:
And here is a (very) rough photoshop of the page, with the div “content1” repositioned to more what I am hoping for ( and the behavior I thought I would expect form grid).
Why won’t the grid row size shrink to fit the content height? And why does nothing change when I delete grid-template-rows completely? (Plus the weirdness of the first div (content1) somehow being pushed into the grid-gap, which is maybe what is making that grid row a slightly more reasonable height?)
Any insight would be most appreciated…