title: Various sized squares grid
body: <p>Is it possible using only html and css to do something like that:</p>
  
  <p><img src="https://i.stack.imgur.com/leDeq.png" alt="squares"></p>
  
  <p>The other requirement is that, since the divs are generated automatically in list,
  they should not be encapsulated in other html element (for instance adding a div for each line is not possible): </p>
  
  <p>the html looks like that:</p>
  
  <pre><code>    &lt;div class="s"&gt;&lt;/div&gt;
      &lt;div class="s"&gt;&lt;/div&gt;
      &lt;div class="big_s"&gt;&lt;/div&gt;
      &lt;div class="s"&gt;&lt;/div&gt;
      &lt;div class="s"&gt;&lt;/div&gt;
      &lt;div class="s"&gt;&lt;/div&gt;
      &lt;div class="s"&gt;&lt;/div&gt;
      &lt;div class="s"&gt;&lt;/div&gt;
      &lt;div class="big_s"&gt;&lt;/div&gt;
      &lt;div class="s"&gt;&lt;/div&gt;
      &lt;div class="s"&gt;&lt;/div&gt;
      &lt;div class="s"&gt;&lt;/div&gt;
      &lt;div class="s"&gt;&lt;/div&gt;
      &lt;div class="s"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>That means that they are in a form of a list.</p>
  
  <p>I did not find how to do this for now, it seems that using float:left and clear:both is not a solution, neither using display:inline-block</p>
  
  <p>If anyone had an idea how I could do this, that would be great!</p>
  
  <p>Thank you.</p>