Flexbox: How to have a grid item placed in flow of more than one row or column

Question

In the imgur album here, the first image is what it currently looks like and the second image is a mockup of what I want it to look like.

The third image is there to show that the purple boxes are automatically generated to fill in all the space of the window.

https://i.stack.imgur.com/RhxyI.jpg

I've used flexbox to contain the red and purple boxes. However, when I make the height of the red boxes span more than one row, instead of flowing into other rows, it pushes the row above and below away.

This is the current CSS for the containing div:

@include flexbox((
          display: box,
          box-orient: horizontal,
          box-pack: justify,
          box-align: center
), $version: 1);
@include flexbox((
          display: flexbox,
          flex-direction: row,
          flex-pack: justify,
          flex-align: center
), $version: 2);
@include flexbox((
          display: flex,
          flex-direction: row,
          justify-content: left,
          align-items: center,
          flex-wrap: wrap
), $version: 3);

Is it possible to fix this in flexbox or do I need to use something else?

I think you will need to use JS to achieve this result, like masonry.js -- http://masonry.desandro.com/ — Chris Seufert, Aug 28 '15 at 04:32
`Flexbox` can't do that - http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css — Paulie_D, Aug 28 '15 at 07:52

Flexbox: How to have a grid item placed in flow of more than one row or column

0 Answers0