Quick Pinterest based column in css
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
.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.