Pure css3 responsive masonry layout for items with fixed width.

Recently I had a task of creating Masonry style layout for items with fixed width but not fixed height. This suppose to be used within Polymer element to layout sub elements in masonry style. I didn't want to introduce any external library to do that so I decided to go with pure css. In Polymer my custom css styles would be scoped for my host element only and not visible for 'outside world'. Apparently it's not hard to do with just several lines of css:

the codepen example is here;

.masonry {
   -moz-column-gap: 1.5em;
   -webkit-column-gap: 1.5em;
   column-gap: 1.5em;
   font-size: .85em;
   width: 95%;
   margin: 3em auto;
}

.item {
   display: inline-block;
   width: 200px;
   background: silver;
   padding: 1em;
   margin: 0 0 1.5em;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}

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

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

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

@media only screen and (min-width: 1100px) { .masonry { -moz-column-count: 5; -webkit-column-count: 5; column-count: 5; }}

and the usage is:

<class=masonry parent>
<class=item child>
<content/>
      ... 
</class=item child>
</class=masonry parent>