I’m trying to replicate the Microsoft site to practice:
I can’t figure out how to resize these boxes to make them wider rather than taller. I’d like to use a relative measurement to make them responsive:
Similar to the Microsoft site:
Would anyone have any suggestions?
Hey, looks like you took a different direction in the meantime. If you still want help, maybe you could create a fork of your pen to post here …
@michaelsndr Thanks. I don’t know what happened there.
Hopefully this link works:
Not really sure I understand the issue. If you let the boxes shrink in width they will get taller then they are wide at some point/screen width (otherwise the content would overflow). You can limit the minimum width on the grid items.
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr))
Here is an example Codepen
@lasjorg Thanks so much for doing that! I had a few questions.
-I guess I’m struggling to understand what is determining the height of the images?
-what does setting
margin: 0 do?
-what do you consider when making the
grid-template-columns to a min of 340px? In other words, what made you decide on 340px?