Kevin Powell - Community•2y ago

How do I make this grid?

How do I make this grid? The image on the left is taking up most of the space, and the other two items on the right are fitting in, respecting the height generated by the first image.

7 Replies

Jochem•2y ago

you're looking for the object-fit property https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

ChavesOP•2y ago

I tried here but it didn't work, maybe the problem is in the way I chose to use the images, could you help in this regard? I'll show you

ChavesOP•2y ago

Here is the repo: https://github.com/sircarloschaves/art-gallery-website

GitHub

GitHub - sircarloschaves/art-gallery-website: Frontend Mentor Art G...

Frontend Mentor Art Gallery Website Challenge. Contribute to sircarloschaves/art-gallery-website development by creating an account on GitHub.

ChavesOP•2y ago

Live page: https://sircarloschaves.github.io/art-gallery-website/

MarkBoots•2y ago

think this should do it for you

.content-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

vince•2y ago

Surprised this wasn't answered. https://codepen.io/vince1444/pen/poYJGVN Oh what the heck I swear I clicked on this and there weren't any answers 😂

ChavesOP•2y ago

Thanks guys, it worked!

Gaming

Programming

How do I make this grid?

Did you find this page helpful?