CSS system alternative to Masonry

Question

I remember a CSS grid system alternative to Masonry (Vanilla) http://masonry.desandro.com/ . That site was black background and displaying/arranging colored boxes (periodic tabl

Answer 1

Here is another alternative if anyone finds it useful: http://suprb.com/apps/nested/

Answer 2

I'm using this. And it works great with Bootstrap. Basically instead of container, I am using WALL:

<style>
.wall {
    width: 100%;
    padding: 0 20px;
    -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
    column-gap: 20px;
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
} 
.wall > .brick {
    display: inline-block;
    width: 100%;
}

@media screen and (min-width:860px) {
    .wall {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;}
}

@media screen and (min-width:1280px) {
    .wall {-moz-column-count: 3; -webkit-column-count: 3; column-count: 3;}
}

@media screen and (min-width:1700px) {
    .wall {-moz-column-count: 4; -webkit-column-count: 4; column-count: 4;}
}

</style>    

This is designed so bricks must be a minimum of 400px. You can do math and change the min-widths if you don't like 400.

Answer 3

Why not just check the source of its counterpart, Isotope: http://isotope.metafizzy.co/index.html

Answer 4

I'd try Salvattore, it uses CSS for the configuration and all the design, no need to even touch JavaScript.

http://salvattore.com/