CodePen

HTML

            
              <table width="100%" cellspacing="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>Regardless of the amount of content, the entire structure will remain grid-like. For instance, when I add more content to this particluar cell, the heights of all the cells in this row will increase to enure that the grid doesn't break. I haven't seen masonry do that - in masonry, boxes with uneven heights will be displayed as uneven heights , but they'll align neatly like on a brick wall.</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
            
          
!
via HTML Inspector

CSS

            
              table{ border-top:1px solid #666; border-left:1px solid #666;}

table td{ padding:10px; margin:0;  border-bottom:1px solid #666; border-right:1px solid #666; width:20%;}
table td:nth-child(2n){ background:#FFCC33;}

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

JS

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