1

I'm trying to replicate this masonry layout I did using CSS. I figured that flexbox would be a valid option to use instead of a grid system. But I run into trouble when I'm trying to align the top right and bottom right box with each other.

I've tried putting them in another container, use flex-direction: column and align-self on the elements I want positioned differently, without any success.

Is it even possible to do what I want to achieve using flexbox? Or should I use a different method?

Any help is much appreciated!

What I want:

What I want

Results with flexbox:

Results with flexbox

Here's my code: 

.container1{
 height: 420px;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: flex-start;
}

.item{
 margin:10px;
 background-color: #F1F1F1;

}

.box{
 height: 420px;
 width: 700px;
}

.tall{
 height: 420px;
 width: 215px;

}

.long{
 height: 215px;
 width: 458px;

}

.square{
 height: 215px;
 width: 215px;

}
<div class="container1">
  <div class="item box"></div>
  <div class="item tall"></div>
  <div class="item square"></div>
  <div class="item long"></div>
  <div class="item long"></div>
  <div class="item tall"></div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
mickeskoglund
  • 31
  • 2
  • For `flexbox` to behave similar to Masonry (which use script), you need to add some script too, as there is no way today to do that without (which of course is the reason they put Masonry together). Well, I think you could do it with CSS Grid, though can't say 100%, as I normally don't stick my head fully into things that doesn't have a decent browser support – Asons Apr 22 '17 at 16:39
  • Flexbox is not designed for creating 2-dimensional grids. It's suited for aligning elements horizontally or vertically along a single line. As mentioned by @LGSon, you can use JS. – Michael Benjamin Apr 22 '17 at 17:06
  • As of March 2017, [**most major browsers support Grid Layout**](http://caniuse.com/#search=grid), which can easily achieve your layout in pure CSS. Here's an example: https://jsfiddle.net/jg1an6qb/ – Michael Benjamin Apr 22 '17 at 17:08
  • @Michael_B Thanks a lot for clarifying and providing a solution! Saved me many hours. – mickeskoglund Apr 22 '17 at 17:30
  • here comes a similar approach minding the ratio fro the square box and height given . idem, this a grid CSS template https://codepen.io/gc-nomade/pen/JNKMYL Unfortunately, IE11 still do not get it. A masonry layout is tuned with the masonry script. :) Grid CSS comes to provide something similar, but yet you need to set the right spanning to each element to let them inbricates through cols and rows together – G-Cyrillus Apr 22 '17 at 17:54
  • Also For older browsers , with fixed size, float is still there to be used https://codepen.io/gc-nomade/pen/qmNpjM as a fallback somehow or on itself – G-Cyrillus Apr 22 '17 at 18:21

0 Answers0