title: How style unordered list like a table?
body: <p>What is the best way to style unordered list for below HTML code:</p>
  
  <pre><code>&lt;ul class="photo-grid"&gt;
      &lt;li class="photo"&gt;
          &lt;a href="#" class="photo-link"&gt;
              &lt;img src="photo1_150x200.jpg" class="photo-img" /&gt;
              &lt;span class="photo-title"&gt;this is my girl&lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li class="photo"&gt;
          &lt;a href="#" class="photo-link"&gt;
              &lt;img src="photo2_150x200.png" class="photo-img" /&gt;
              &lt;span class="photo-title"&gt;this_is_photo_for_anonymous_people&lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want to do this steps:</p>
  
  <p>
  <li>
  divide the page into 4 columns with an unknown number of rows
  </li></p>
  
  <p><li>photo’s can be either portrait (150px X 200px) or landscape (200px X 150px), but I don’t know that upfront. A row can thus have only landscape, only portrait, or a mix of landscape and portrait photo’s
  </li></p>
  
  <p><li>spacing between rows is always 10px</li></p>
  
  <p><li>titles are vertically aligned to each other
  </li></p>