title: CSS Flex dynamic grid with multiple sizes
body: <p>I have a problem with flex.</p>
  
  <p>I have a wrapper where a minimum of 1 and maximum of 9 squares can be shown. Squares can have multiple sizes, based on the number of squares in grid.
  I've got all required cases working except for one, as seen in this picture:
  <a href="https://i.stack.imgur.com/xskB0.jpg"><img src="https://i.stack.imgur.com/xskB0.jpg" alt="enter image description here"></a></p>
  
  <p>My styles are:</p>
  
  <pre><code>.grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: space-between;
      width: 300px;
      height: 300px;
      position: relative;
  }
  </code></pre>
  
  <p>Plus. the images have sized based on the overall number of them and their position in a list.</p>
  
  <p>So the problem is in situation when I have 1 big square (takes position of 4 small squares) and 5 small squares around him from right and bottom.</p>
  
  <p>The big one is first as he should be.</p>
  
  <p>Next to him (top right corner) is second one, that's also correct.</p>
  
  <p><strong>The third one is in bottom left corner, and it should be in the second line and on the far right.</strong> Because of this one, all the others are in wrong position, so the last one is overflowing.</p>
  
  <p>I've tried a lot of value combinations for <code>justify-content</code>, <code>align-content</code>, <code>align-items</code> and <code>align-self</code> but nothing have worked.</p>
  
  <p>I'll go back to ton of classes and position absolute solution, if there is no flex solution for this. But I don't like it. It's too much styles and it doesn't look good.</p>
  
  <p>Any advice would be greatly appreciated.</p>