0
First you will need to create a wrapper to wrap the images. Then split the image on the right and left into their respective containers.
<div class="wrapper">
<figure>
<div class="img-grid double"><img src="http://dummyimage.com/344x210/574357/fff" /><img src="http://dummyimage.com/344x210/574357/fff" /></div>
<div class="img-grid single"><img src="http://dummyimage.com/660x440/445157/fff" /></div>
</figure>
</div>
Soon after that, give the width you want for your wrapper. Be sure to use max-width and not width, so it will track the width of the screen.
.wrapper
max-width 1024px //site content width
margin 1em auto 0 auto
And for the rest:
figure
max-width 100%
display flex
justify-content space-between
.img-grid
display flex
flex-direction column // coloca as iamgens uma em cima da outra
justify-content space-between
.img-grid.double
flex 0 33%
min-width 0 // FireFox hack
.img-grid.single
flex 0 64%
min-width 0 // FireFox hack
img
max-width 100%
Here’s an example for you to test. Make a few changes to see how it all works. I hope I’ve helped!
put the code you are trying on your question
– MagicHat
@Magichat I don’t even know where to start all the videos I’ve seen only deal with uniform columns or rows. I didn’t find anything that has a photo grid and two smaller ones using the same height as the larger photo.
– Joao Nivaldo
One thing is the structure, another is what it will contain... This proportion that you mention between desktop and mobile, I do not believe is ideal, because mobile has a vertical style,,,
– MagicHat
@Magichat then I know. But the client asked me so. He wants a photo gallery like this one he saw in a WP template, link. Ai when you switch to mobile it simply shrinks in proportion.
– Joao Nivaldo
I got it... but I’m not sure if flexbox will fix it, I think it has to be with mediaquerie...
– MagicHat