-1

I'M working on a page where I'll show news in 2 columns. The elements width will be the same, it should be responsive -goes to 1 column if the viewport is smaller, but I've already know how to do it-. & it is an angular2 project.

The problem comes here, when the element's height is not equal I need something like this:

|AAA|BBB|
|AAA|BBB|
|AAA|CCC|
|DDD|CCC|
|DDD|EEE|
......

So basically I need something when instead of keep the lines the html fill the gaps. I've already found Masonry, which could be a great solution but unfortunately I can't use it because I work with Angular2 and the ported angular2-masonry project is dead... with a lot of issues and I can't fix them unfortunately.. Other jquery libraries based on the previous one is not an option.. without a ported version to angular2 they are barely usable. (if you know something which should work I will try it!) The other option is the magic css. I've found alternatives but almost all of them sort the elements top to bottom, which is not good for me. The only one I've found after a lot research is this: https://codepen.io/anon/pen/veGmgJ but unfortunately I don't know how should I use it in my solution... my solution basically is not a big deal: I've a div (or whatever you want) with an ngFor..

Thanks for the answers!

Colosh
  • 135
  • 2
  • 11

1 Answers1

0

Flexbox might be what you're after and it can handle the stacking columns as well. Heres an example: https://codepen.io/anon/pen/aLmzVa

.flexContainer {
  display: flex; 
  flex-direction: row;
  flex-wrap: wrap;
}

.flexItem {
  flex: 1 0 250px;
  border: 1px solid;
 }
SLL
  • 271
  • 2
  • 7
  • Thanks for the answer but as I see the smaller elements get the height of the heightes in the actual row which is quite not the behaviour I'm looking for :( – Colosh Sep 22 '17 at 09:38