Let’s first start off with saying this approach isn’t for everyone. There are some compatibility issues for IE browsers, but in general it will work for anything that is within the technology of this century. The approach is to create all items in the columns as a list structure and to make that structure to appear like the pinterest column design.

First off is setting up the markup. We will just setup a simple ul, see below.

 
<ul class="make-me-pretty">
	<li><span class="title">Title A</span> Description of A </li>
	<li><span class="title">Title B</span> Description of B </li>
	<li><span class="title">Title C</span> Description of C </li>
	<li><span class="title">Title D</span> Description of D </li>
</ul>

Let’s dive into how we will style it. We want to set the list to say its column based so it wraps like a newspaper. For all the items in the list it will wrap around a column structure.

 
.make-me-pretty
  column-count: $column-count
  column-gap: $column-gap
  -moz-column-count: $column-count
  -moz-column-gap: $column-gap

What you will notice is that the wrap cuts off some of the elements on to different columns. In order to prevent that individual item from wrapping into 2 parts we set the style of the li.

 
.make-me-pretty li
  display: block

There you have it, column based design without a lot of effort. You can style the li pretty much how you want.