Make this grid with Flexbox

Asked

Viewed 233 times

0

People I’m having a great difficulty to create with Flexbox this grid, as the image below. I need it to be no fixed size because when the images are seen on the phone will be in the same position only smaller. inserir a descrição da imagem aqui

Thank you

flexbox

  • put the code you are trying on your question

  • @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.

  • 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 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.

  • I got it... but I’m not sure if flexbox will fix it, I think it has to be with mediaquerie...

1 answer

1


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!

http://codepen.io/diego-fortes/pen/XNOBWy

  • While this link may answer the question, it is best to include the essential parts of the answer here and provide the link for reference. Replies per link only can be invalidated if the page with the link is changed. - From Review

  • 1

    Got it. Thanks a lot for the help, I edited the reply!

Browser other questions tagged flexbox

You are not signed in. Login or sign up in order to post.