Get images to align right under other images

Question

I'm trying to create an image gallery with Flexbox, Something similar to the one on AirBnb website. The gallery consists of 5 images. The first image takes 50% of the width of the container and 100% of it height. The rest of the images (4) takes 25% width of the container each, and 50% height.

I tried using the code below, but I couldnt get image 4 and 5 to align right under image 2 and 3. and to the side of image 1.

I need help to make this work. My current code is below

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0 auto;
}

.row {
  width: 100%;
  height: 100%;
  max-width: 1000px;
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
}

.img-1 {
  background: url("https://images.unsplash.com/photo-1422205512921-12dac7b3b603?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2255&q=80")
    no-repeat center center;
  background-size: cover;
  width: 100%;
}

.img-2 {
  background: url("https://images.unsplash.com/photo-1528696892704-5e1122852276?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80")
    no-repeat center center;
  background-size: cover;
  width: 100%;
}

.img-3 {
  background: url("https://images.unsplash.com/photo-1524678606370-a47ad25cb82a?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80")
    no-repeat center center;
  background-size: cover;
  width: 100%;
}

.img-4 {
  background: url("https://images.unsplash.com/photo-1563305145-b64e0c2184aa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80")
    no-repeat center center;
  background-size: cover;
  width: 100%;
}

.img-5 {
  background: url("https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80")
    no-repeat center center;
  background-size: cover;
  width: 100%;
}

.row {
  height: 600px;
}

.img-1 {
  height: 100%;
  width: 50%;
}

.img-2,
.img-3,
.img-4,
.img-5 {
  width: 25%;
  height: 50%;
}

<div class="container">
  <div class="row">
    <div class="img-1"></div>
    <div class="img img-2"></div>
    <div class="img img-3"></div>
    <div class="img img-4"></div>
    <div class="img img-5"></div>
  </div>
</div>

You might want to google for keyword "masonry" and how to achieve this effect. — cloned, May 05 '20 at 10:44
i dont mind adding extra div, yeah i know about masonry, but im trying to get it to work using only css flexbox properties — bokanoga, May 05 '20 at 11:01
So you have 5 images that, together, take up 150% of the width of the page? — TylerH, May 05 '20 at 13:58

Temani Afif · Accepted Answer · 2020-05-05T12:11:11.750

one way with flexbox and without extra div:

.row {
  max-width: 1000px;
  height: 500px;
  margin:  auto;
  display: flex;
  flex-direction:column;
  flex-wrap: wrap;
}
.img {
  width: 25%;
  height:50%;
  background:center/ cover no-repeat;
}
.img-1 {
  background-image: url("https://images.unsplash.com/photo-1422205512921-12dac7b3b603?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2255&q=80");
  width: 50%;
  height: 100%;
}

.img-2 {
  background-image: url("https://images.unsplash.com/photo-1528696892704-5e1122852276?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
}

.img-3 {
  background-image: url("https://images.unsplash.com/photo-1524678606370-a47ad25cb82a?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80");
  order:4;
}

.img-4 {
  background-image: url("https://images.unsplash.com/photo-1563305145-b64e0c2184aa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  order:3;
}

.img-5 {
  background-image: url("https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  order:5;
}

<div class="row">
    <div class="img img-1"></div>
    <div class="img img-2"></div>
    <div class="img img-3"></div>
    <div class="img img-4"></div>
    <div class="img img-5"></div>
</div>

Munni · Answer 2 · 2020-05-05T11:07:51.743

You need to make changes on markup also. Hope below code will solve your problem

 .container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0 auto;
 }

.row {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.row1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.img-1 {
  background: url("https://images.unsplash.com/photo-1422205512921-12dac7b3b603?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2255&q=80")
    no-repeat center center;
  background-size: cover;
  width: 100%;
}

.img-2 {
  background: url("https://images.unsplash.com/photo-1528696892704-5e1122852276?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80")
    no-repeat center center;
  background-size: cover;
  width: 100%;
}

.img-3 {
  background: url("https://images.unsplash.com/photo-1524678606370-a47ad25cb82a?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80")
    no-repeat center center;
  background-size: cover;
  width: 100%;
}

.img-4 {
  background: url("https://images.unsplash.com/photo-1563305145-b64e0c2184aa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80")
    no-repeat center center;
  background-size: cover;
  width: 100%;
}

.img-5 {
  background: url("https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80")
    no-repeat center center;
  background-size: cover;
  width: 100%;
}

.row {
  height: 600px;
}

.row1 {
  height: 600px;
}

.img-1 {
  height: 100%;
  width: 100%;
}

.img-2,
.img-3,
.img-4,
.img-5 {
  width: 50%;
  height: 50%;
}

<div class="container">
  <div class="row">
    <div class="img-1"></div>
  </div>
  <div class="row1">
    <div class="img img-2"></div>
    <div class="img img-3"></div>
    <div class="img img-4"></div>
    <div class="img img-5"></div>
  </div>
</div>

score 1 · Answer 3 · answered May 05 '20 at 11:49

Here's a responsive gallery using flexbox. Added some wrapper div elements around div elements with background imags and added some css properties to make it work along with couple of media queries to make it responsive.

.row {
  margin: 10px 0;
  display: flex;
  background:  red;
}

.inner-wrapper {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  height: 50%;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  flex-basis: 50%;
  height: 100%;
}

.img-1 {
  background: url("https://images.unsplash.com/photo-1422205512921-12dac7b3b603?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2255&q=80")
    no-repeat center center;
  background-size: cover;
}

.img-2 {
  background: url("https://images.unsplash.com/photo-1528696892704-5e1122852276?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80")
    no-repeat center center;
  background-size: cover;
}

.img-3 {
  background: url("https://images.unsplash.com/photo-1524678606370-a47ad25cb82a?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80")
    no-repeat center center;
  background-size: cover;
}

.img-4 {
  background: url("https://images.unsplash.com/photo-1563305145-b64e0c2184aa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80")
    no-repeat center center;
  background-size: cover;
}

.img-5 {
  background: url("https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80")
    no-repeat center center;
  background-size: cover;
}

.img-1 {
  height: 600px;
  flex-basis: 50%;
  flex-grow: 1;
}

.img {
  flex-basis: 50%;
  height: 300px;
}

@media (max-width: 500px) {
  .row {
    flex-direction: column;
  }
}

@media (max-width: 400px) {
  .img {
    flex-basis: 100%;
  }
  
  .inner-wrapper {
    flex-direction: column;
  }
}

<div class="container">
  <div class="row">
  
    <div class="img-1"></div>
    <div class="wrapper">
      <div class="inner-wrapper">
        <div class="img img-2"></div>
        <div class="img img-3"></div>
      </div>
      <div class="inner-wrapper">
        <div class="img img-4"></div>
        <div class="img img-5"></div>
      </div>
    </div>
      
  </div>
</div>

Manjuboyz · Answer 4 · 2020-05-05T12:45:45.040

You can do something like this.

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 600px;
  margin: 0 auto;
  width: 100%;
}

.firstColumn {
  width: 50%;
  height: 100%;
}

.img-1 {
  background: url("https://images.unsplash.com/photo-1422205512921-12dac7b3b603?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2255&q=80") no-repeat center center;
  background-size: cover;
  height: 100%;
  width: 100%;
}

.secondColumn {
  width: 50%;
  height: 600px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.img-2 {
  background: url("https://images.unsplash.com/photo-1528696892704-5e1122852276?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80") no-repeat center center;
  background-size: cover;
  width: 50%;
  height: 50%;
}

.img-3 {
  background: url("https://images.unsplash.com/photo-1524678606370-a47ad25cb82a?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80") no-repeat center center;
  background-size: cover;
  width: 50%;
  height: 50%;
}

.img-4 {
  background: url("https://images.unsplash.com/photo-1563305145-b64e0c2184aa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80") no-repeat center center;
  background-size: cover;
  width: 50%;
  height: 50%;
}

.img-5 {
  background: url("https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80") no-repeat center center;
  background-size: cover;
  width: 50%;
  height: 50%;
}

<div class="container">
  <div class="firstColumn">
    <div class="img-1"></div>
  </div>
  <div class="secondColumn">
    <div class="img img-2"></div>
    <div class="img img-3"></div>
    <div class="img img-4"></div>
    <div class="img img-5"></div>
  </div>
</div>

Get images to align right under other images

4 Answers4