Column KITTEN

by Symphony

HTML

<ul>
    <li><a href="#t"><img src="http://placekitten.com/g/600/500" alt=""/><span>Lorem ipsum dolor.</span></a></li>
    <li><a href="#t"><img src="http://placekitten.com/g/620/330" alt="" /><span>Lorem ipsum.</span></a></li>
    <li><a href="#t"><img src="http://placekitten.com/g/640/300" alt="" /><span>Lorem ipsum.</span></a></li>
    <li><a href="#t"><img src="http://placekitten.com/g/600/400" alt="" /><span>Lorem ipsum.</span></a></li>
    <li><a href="#t"><img src="http://placekitten.com/g/600/300" alt="" /><span>Lorem ipsum.</span></a></li>
    <li><a href="#t"><img src="http://placekitten.com/g/600/300" alt=""/><span>Lorem ipsum.</span></a></li>
    <li><a href="#t"><img src="http://placekitten.com/g/600/250" alt=""/><span>Lorem ipsum.</span></a></li>
    <li><a href="#t"><img src="http://placekitten.com/g/600/300" alt=""/><span>Lorem ipsum.</span></a></li>
</ul>

CSS

ul {
       -webkit-column-count: 3;
       -webkit-column-gap: 20px;
       -moz-column-count: 3;
       -moz-column-gap: 20px;
       column-count: 3;
       column-gap: 20px;
       text-align:justify;
}
ul li {
    width: 100%;
    margin-bottom: 20px;
    overflow: hidden;
}

ul li a img,
ul li a {
    width: inherit;
}
ul li a span {
    display: block;
}