/ layout

Responsive Pure CSS Masonry Layout

Responsive Pure CSS Masonry Layout

Responsive Pure CSS Masonry Layout

Responsive column masonry layout with CSS column count.

Masonry layouts have been around a long time. You'll most likely recognize its use on Pinterest. In fact, Pinterest so popularized the use of this layout that it’s also known as the “Pinterest style layout”.

Responsive Pure CSS Masonry Layout

While a simple layout in theory (“maybe we can just use floats?”), CSS does not actually make this easy to implement. Using floats will not reduce the spaces between differently sized items. Instead you will end up with something along the lines of this:

Responsive Pure CSS Masonry Layout

codepen

See the Pen Responsive Pure CSS Masonry Layout - Column Count by Stephanie (@ramenhog) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More