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

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

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

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

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

Thanks guys, it worked!

Gaming

Programming

How do I make this grid?

Did you find this page helpful?