title: CSS: Showing an unsorted list in a tile-like style
body: <p>I have an unsorted list which I want do display in a tile-like style using CSS.
  This is my list:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;Area 1&lt;/li&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Topic 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Topic 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Topic 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Topic 4&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;li&gt;Area 2&lt;/li&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Topic 5&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Topic 6&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This is the needed Output:
  Unfortunately I cannot post images here (due to my low reputation).</p>
  
  <pre><code>+---------------------------+
  |            Area 1         |
  +---------------------------+
  
  +-------+ +-------+ +-------+
  |Topic 1| |Topic 2| |Topic 3|
  +-------+ +-------+ +-------+
  +-------+ 
  |Topic 4| 
  +-------+ 
  
  
  +---------------------------+
  |            Area 2         |
  +---------------------------+
  
  +-------+ +-------+
  |Topic 5| |Topic 6|
  +-------+ +-------+
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/mc0xi.jpg" alt="enter image description here"></p>
  
  <p>In a first step it would be enough if the list is only these 2 steps deep.</p>
  
  <p>I checked several approaches using CSS, but failed.
  Can someone help me please with the solution or an approach?</p>
  
  <p>Best regards,
  Stefan</p>