Using flexbox to create responsive image grid with various sizes

Question

I am trying to create a design based on flexbox with an aspect ratio of 16:9. I want to create a design similar to the attached image, but i am not sure how to create the last column. Furthermore i would like to introduce responsive behavior into the design.

Codepen: http://codepen.io/anon/pen/xVdLJv

HTML

<div class="flex_container">
  <div class="flex_group__1">
    <img src="holder.js/460x670" />
    <img src="holder.js/460x408" />
  </div>
  <div class="flex_group__2">
    <img src="holder.js/645x813">
    <img src="holder.js/645x265">
  </div>
  <div class="flex_group__3">
    <img src="holder.js/808x330"/>
    <img src="holder.js/452x748"/>
    <img src="holder.js/356x748"/>
  </div>
</div>

CSS

.flex_group__1, .flex_group__2, .flex_group__3, .flex_container {
  display: flex;
}

.flex_container {
  flex-direction: row;
}

.flex_group__3 {
  flex-direction: row wrap;
  justify-content: flex-end;
}

.flex_group__1, .flex_group__2 {
  flex-direction: column;
}

I modified my answer some, and added a link to an updated codepen — Asons, Mar 23 '16 at 16:38
This may be helpful: http://stackoverflow.com/a/34481128/3597276 — Michael Benjamin, Mar 23 '16 at 17:26
I tried with isotope and masonry, but it was just way too cumbersome to get working, so i gave up and went with this which may seem very static (which it is). — JavaCake, Mar 23 '16 at 17:28

Asons · Accepted Answer · 2016-03-23T16:35:27.990

1

You add another flex group in flex_group__3

Updated codepen

Note, the flex_group__3 needs to be column

CSS (rules updated)

.flex_group__1, .flex_group__2, .flex_group__3, .flex_group__3_inner_bottom, .flex_container {
  display: flex;
}

.flex_group__1, .flex_group__2, .flex_group__3 {
  flex-direction: column;
}

HTML (markup updated/added)

<div class="flex_group__3">
  <img src="holder.js/808x330"/>
  <div class="flex_group__3_inner_bottom">
    <img src="holder.js/452x748"/>
    <img src="holder.js/356x748"/>
  </div>
</div>

edited Mar 23 '16 at 16:35

answered Mar 23 '16 at 16:22

Asons

84,923
12
110
165

That makes so much sense. The only dilemma is how to deal with the responsiveness. – JavaCake Mar 23 '16 at 17:25
@JavaCake Two ways, as I see it, media queries or give the images a max width which corresponds the their size in relation to the total size of the flex container. – Asons Mar 23 '16 at 17:35
I was hoping i could set it to 100% width and make the page adjust it accordingly, but it seems to be way more complicated than what i though initially. – JavaCake Mar 23 '16 at 17:37
1

@JavaCake Nothing is that simple :) .. almost anyway .. This is a trial and error project, though I would start with giving the items an proportional size in relation to the layout's size. Happy holiday :) – Asons Mar 23 '16 at 17:41
Well i am thinking if masonry is a better way to go or not.. I have no clue how to resize this without too much spaghetti code. – JavaCake Mar 23 '16 at 17:42
@JavaCake I made some adjustments to this codepen, http://codepen.io/anon/pen/VabMwm, where I added some rules in the end ... hope this help what to chose :) – Asons Mar 23 '16 at 17:52
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/107163/discussion-between-javacake-and-lgson). – JavaCake Mar 23 '16 at 17:53
Heres my attempt to fix the responsiveness hence i am already working with bootstrap: http://codepen.io/anon/pen/vGmpvX – JavaCake Mar 23 '16 at 20:32
@JavaCake Then I take my hands out of the cookie jar, as bootstrap is no friend of mine :) – Asons Mar 23 '16 at 20:34
Well bootstrap does nothing for me to be honest. Except for the media queries. – JavaCake Mar 23 '16 at 20:36

score 0 · Answer 2 · answered Mar 23 '16 at 23:03

So, this was driving me a bit bonkers, so I had at it. You can also see my results on CodePen. There's a lot of containers inside of containers here, which is meant to duplicate this exact layout and will likely not be great for anything else, but I've gotten close and it's responsive. (Only two media queries in there, but you could do additional ones.)

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.flex_container {
  display: flex;
  font-size: 0;
  justify-content: space-between;
}
.flex_container > .flex_group {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.flex_container > .flex_group:first-child {
  width: 460px;
}
.flex_container > .flex_group:nth-child(2) {
  width: 645px;
}
.flex_container > .flex_group:nth-child(3) {
  width: 808px;
}
.flex_group img {
  padding: 10px;
  height: auto;
  width: 100%;
}
.flex_group > .flex_group:last-child img:first-child {
  width: 50%;
}
.flex_group > .flex_group:last-child img:last-child {
  width: 50%;
}
@media only screen and (max-width: 399px) {
  .flex_group > .flex_group:last-child img {
    width: 100%!important;
  }
}
@media only screen and (max-width: 599px) {
  .flex_container {
    flex-wrap: wrap;
    justify-content: center;
  }
}
/* fallback for earlier versions of Firefox */

@supports not (flex-wrap: wrap) {
  .flex_container {
    display: block;
  }
  .flex_container img {
    display: inline-block;
    vertical-align: top;
  }
}

<div class="flex_container">
  <div class="flex_group">
    <img src="http://placehold.it/460x670" />
    <img src="http://placehold.it/460x408" />
  </div>
  <div class="flex_group">
    <img src="http://placehold.it/645x813">
    <img src="http://placehold.it/645x265">

  </div>
  <div class="flex_group">
    <div class="flex_group">
      <img src="http://placehold.it/808x330" />
    </div>
    <div class="flex_group">
      <img src="http://placehold.it/404x748" />
      <img src="http://placehold.it/404x748" />
    </div>
  </div>
</div>

Using flexbox to create responsive image grid with various sizes

2 Answers2