<style> .masonry { margin: 1.5em 0; padding: 0; -moz-column-gap: 1.5em; -webkit-column-gap: 1.5em; column-gap: 1.5em; } .item { display: inline-block; background: #fff; padding:0; margin: 0 0 1.5em; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.18); border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } @media only screen and (min-width: 700px) { .masonry { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } } @media only screen and (min-width: 900px) { .masonry { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } } @media only screen and (min-width: 1100px) { .masonry { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; } } </style> html