An article element expanded in height is pushing down the other article elements in every row and column underneath

I have a raster of article elements, each is representing an event. Via a checkbox hack additional content for each event is expanded and shown on mouse click. The problem is:

Would it somehow be possible that only the articles in the same column right underneath the expanded article get pushed down and not the articles in the other columns too (like event 4, the red one)?

The example (using sass, compass and singularity) is saved as a gist https://gist.github.com/rpkoller/678e30212e9da8b41619 and on sassmeister it is http://sassmeister.com/gist/678e30212e9da8b41619 (the sassmeister example also suffers a little clearfix issue aside which isn't happening locally with the same code)

At the moment i am out of ideas how to solve that issue. Each hint is appreciated. Best regards Ralf

That's exactly how a grid layout is supposed to work. First the elements form in rows, then the rows stack vertically.

You seem to want the opposite: the elements to form in columns, then columns to stack horizontally. With HTML/CSS this is only possible if you know exact number of elements in your grid. Create a container for each column, align them with Singularity and distribute elements into containers.

If you want this to work for an arbitrary number of elements, you'll have to use a JS library that aligns them dynamically. There are dozens of such libraries. The most known is Masonry, but it's not necessarily the best out there. The one i like is Salvattore because it lets you leverage CSS to lay out your grid.