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

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

Chaves•10mo 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

Chaves•10mo 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.

Chaves•10mo ago

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

MarkBoots•10mo 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•10mo 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 😂

Chaves•10mo ago

Thanks guys, it worked!

Gaming

Programming

How do I make this grid?