CSS Flexbox 3 columns Grid (4X4 + 1 large)

Question

I'm trying to figure out how to get this in Flexbox, but the only thing I can get is in the code snippet:

Do you have an idea to manage this CSS only (I can't really touch the structure of the HTML as it is a PHP foreach loop)?

Could using CSS grid help here?

.grid {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}

.photo {
  position: relative;
  flex: 0 0 calc(25% - 20px);
  margin: 10px;
  align-self: flex-start;
  overflow: hidden;
  background: black;
}

.photo:after {
  content: "";
  display: block;
  padding-top: 100%;
}

.large {
  flex: 0 0 calc(50% - 20px);
}

<div class="grid">
  <div class="photo large"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
</div>

@Michael_B I couldn't find much help with the two questions you linked… My divs are responsive squares so it makes it more complex, all the examples are based on a fixed width column which is not my case — flks, Nov 15 '17 at 20:07

Asons · Accepted Answer · 2017-11-15T20:53:23.810

Based on then fact that this is squares, you can simply position the large absolute, to the right, and the smaller, with their padding-top trick, will controls the large's height.

Then, by setting a padding on the grid, we keep the smaller on the left side and make space on the right for the large.

Additionally, we also need to change the small to be 50% of the space, not 25%.

Stack snippet

.grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding-right: 50%;
}

.photo {
  position: relative;
  flex: 0 0 calc(50% - 20px);
  margin: 10px;
  overflow: hidden;
  background: black;
}

.photo:not(.large):after {
  content: "";
  display: block;
  padding-top: 100%;
}

.large {
  position: absolute;
  right: 0;
  width: calc(50% - 20px);
  height: calc(100% - 20px);
}

<div class="grid">
  <div class="photo large"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
</div>

Nice one man! Didn't thought of that. It does the trick pretty well. Thank you! — flks, Nov 15 '17 at 21:29

score 0 · Answer 2 · answered Nov 15 '17 at 20:19

This solution uses css grid, just be mindful of its compatibility with Internet Explorer.

.grid {
  display: grid;
  grid-gap: 10px;
  width:100vw;
  height:100vh;
  grid-template: "item1 item2 large large" "item3 item4 large large" 
}

.photo {
  background: black;
}
.large {
  grid-area:large;
}
.photo:nth-of-type(2){ grid-area:item1;}
.photo:nth-of-type(3){ grid-area:item2;}
.photo:nth-of-type(4){ grid-area:item3;}
.photo:nth-of-type(5){ grid-area:item4;}

<div class="grid">
  <div class="photo large"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
</div>

CSS Flexbox 3 columns Grid (4X4 + 1 large)

2 Answers2