Kevin Powell - Community•12mo 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•12mo ago

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

ChavesOP•12mo 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•12mo 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•12mo ago

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

MarkBoots•12mo 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•12mo 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•12mo ago

Thanks guys, it worked!

Gaming

Programming

How do I make this grid?