Quick Tip: LESS Mixins for Pure CSS Pinterest / Masonry style grid layout

Pinterest¬†popularized the¬†masonry grid style layout. Here’s a simple solution for a masonry layout built with pure CSS3, and no javascript or floats.


// Parent Element, or Container
.grid (@columns: 3, @gap: 10px, @width: 100%) {
-moz-column-count: @columns;
-moz-column-gap: @gap;
-webkit-column-count: @columns;
-webkit-column-gap: @gap;
column-count: @columns;
column-gap: @gap;
width: @width;

// Child Element, or Tile
.grid-box (@margin-bottom: 20px) {
display: inline-block;
margin-bottom: @margin-bottom;
width: 100%;

// Example: Book Shelf concept
.book-shelf {
background: #fff;
.grid (3, 10px, 960px)
.book {
.grid-box (15px);


Based on Radu’s Masonry CSS. Check out his post for info on browser compatibility and fallbacks.