CSS Grid- How can I re-size these boxes to make them "landscape"?

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 …

1 Like

@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

1 Like

@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 body to 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?

Thank you!!!

  1. The width of the image determines the height, unless if you set an explicit height. If you do that you should use object-fit (cover or contain).

  2. It just removes the default margin on the body.

  3. Primarily just how it looks. But it depends on the original size of the image and when you want the grid to wrap.

1 Like