Flexbox Grid Centered Coloumn + 2 Objects per Row

Question

I'd like to build a Grid with Flexbox that contains 2 Objects per row. These Objects should be centered along a vertical coloumn and have different widths (as on the picture). Does anyone have an Idea how to approach it?

I'd like to use flexbox to be able to swith on to 1 Object per row and keep the correct order. Otherwise I would have nested divs and alligned the objects with

left:0;

or

right:0;

but then I wouldn't be able to keep the order on mobile. Is there any way to achieve this?

Flexbox can't do that. In fact, other than actual *positioning* I'm not aware of **any** layout method that *can*. — Paulie_D, Feb 01 '16 at 15:06
@Paulie_D do you have an idea how I could apporach it otherwise? — vinni, Feb 01 '16 at 15:07
Basically, you need JS - http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css — Paulie_D, Feb 01 '16 at 15:08
In an afterthought, although it won't help you *yet* CSS Grids might be something for the future but they're not here yet. — Paulie_D, Feb 01 '16 at 15:15

score 0 · Accepted Answer · answered Feb 02 '16 at 18:00

So to get this working I used masonry.js I built a grid with 2 grid_items per row at 50% width. Then I inserted the Boxes into the grid_items and gave them float:right / float:left.

Css:

.grid {
width: 100vw;
}

.grid-item { 
width: 50%; 
margin-bottom: 30px;
background-color:grey;
}

Flexbox Grid Centered Coloumn + 2 Objects per Row

1 Answers1