CodePen

HTML

            
              <ul class="block">
  <li>
    Some content here.<br />
    More content.<br />
    Even more content.<br />
    Enough content for now.<br />
  </li>
  
  <li>
    Some content here.<br />
    More content.<br />
    Even more content.<br />
    More content please.<br />
    And some more<br />
    Enough content for now.<br />
  </li>
  
  <li>
    Some content here.<br />
    More content.<br />
    Even more content.<br />
    Enough content for now.<br />
  </li>
  
  <li>
    Some content here.<br />
    More content.<br />
    Even more content.<br />
    More content.<br />
    Even more content.<br />
  </li>
  
  <li>
    Some content here.<br />
    More content.<br />
    Even more content.<br />
  </li>
  
  <li>
    Some content here.<br />
    More content.<br />
    Even more content.<br />
    Enough content for now.<br />
  </li>
  
  <li>
    Some content here.<br />
    More content.<br />
    Even more content.<br />
    More content.<br />
    Even more content.<br />
  </li>
  
  <li>
    Some content here.<br />
    More content.<br />
    Even more content.<br />
  </li>
  
  <li>
    Some content here.<br />
    More content.<br />
    Even more content.<br />
    Enough content for now.<br />
  </li>
  
  <li>
    Some content here.<br />
    More content.<br />
    Even more content.<br />
    More content.<br />
    Even more content.<br />
  </li>
  
  <li>
    Some content here.<br />
    More content.<br />
    Even more content.<br />
  </li>
  
  <li>
    Some content here.<br />
    More content.<br />
    Even more content.<br />
    Enough content for now.<br />
  </li>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <div style="clear:both;"></div>
</ul>
            
          
!
via HTML Inspector

CSS

            
              body  {  font-family:"Tahoma", Geneva, sans-serif; font-size:15px; }

.block, .block li  { display:block; }
.block  {
  width:960px;
  margin:10px; padding:10px;
  background:rgba(0,80,140,0.3);
}
  .block li  {
    display: inline-block;
    vertical-align: top;
    list-style:none;
    background:rgba(255,0,0,0.4);
    width:290px; margin:0 10px 10px 0; padding:5px;
  }
    .block li:nth-child(3n)  {
      margin:0 0 10px 0;
      background:rgba(0,255,0,0.6);
    }
    .block li:nth-child(3n-1)  {
      background:rgba(0,0,255,0.5);
    }



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

JS

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