CodePen

HTML

            
              <div class="threeColcss">

    <ul class="threecolumn">
      
        <li>1 </li>
        <li> 2 </li>
        <li>3 </li>
        
        <!--

        [if IE]>
        </ul>
        <ul class="threecolumn">
        <![endif]

        -->
        <li> 4</li>
        <li>5</li>
        <li>6 </li>
      
        <!--

        [if IE]>
        </ul><ul  class="threecolumn" >
        <![endif]

        -->
        <li> 7 </li>
        <li> 8</li>
        <li> 9</li>
        
    </ul>

</div>
            
          
!

CSS

            
              .threeColcss{
	margin-top: 20px;
-moz-column-count:3; / Firefox /
-webkit-column-count:3; / Safari and Chrome /
column-count:3;
  width: 200px;
}
li {
  width: 90px;
  height: 90px;
  background:
    black 
    url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/80208/profile/profile-80_1.jpg);
  color: white;
  text-align: center;
  font-size: 50px;
  line-height: 90px;
  font-weight: bold;
  border: 1px solid white;
}


            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................