Masonry using CSS only

IE need not apply –no surprise there. I’ve seen some jquery plugins that will allow IE CSS columns, but haven’t had time to screw with them. One day Microsoft will release a real browser. Really.

http://www.udlx.co/10/

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam cursus consequat ligula.
  • Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam viverra, erat sed tempus pellentesque, dolor lacus semper ante, at aliquet augue tortor id diam
  • Mauris at purus in ligula semper porta
  • Nullam facilisis tincidunt libero, in vestibulum sem blandit non
  • Nunc tincidunt euismod quam sit amet congue
  • Vestibulum fermentum tincidunt dui, non fringilla ante iaculis et.
  • Donec in nisl nulla, in adipiscing lorem
  • Nullam ac dolor odio, eget porta dui.
  • Sed id massa vitae ante pulvinar varius. Sed porta vehicula ipsum a faucibus.
  • Nullam vel lectus sapien, non facilisis ipsum
  • Nunc non tincidunt leo
  • Nunc tincidunt sodales lorem et adipiscing

 

* {
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;   
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, Tahoma, Arial;
font-weight: 300;
font-size: 16.5px;
border: 0;
zoom: 1;
text-decoration:none;
vertical-align: baseline;	
}
article {
width: 100%;
max-width: 800px;
background: #ddd;
margin: 0 auto;
padding: 10px;
overflow:hidden
}
ul {
list-style: none;
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
@media all and (max-width: 700px) {
ul {
list-style: none;
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
}	
}
@media all and (max-width: 450px) {
ul {
list-style: none;
-moz-column-count: 1;
-moz-column-gap: 20px;
-webkit-column-count:1;
-webkit-column-gap: 20px;
column-count: 1;
column-gap: 10px;
clear: both;
}	
}
li {
padding: 10px;
margin: 10px 0;
background: #999;
border: 1px dotted #666
}