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 table elements) . It also had filtering boxes based on their shapes and size (like round, square e.t.c) . It was also using hardware acceleration. I spend a lot of time to find it but no luck. Anyone knows this site?
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-width
s if you don't like 400.