Подскажите с размещением блоков
 

При вёрстке страницы столкнулся с проблемой, что не могу выставить блоки в заданом порядке. В моём случае блок "Bags"(тот, что высокий) портит всю малину. Пробовал через флекс, пока что остановился на флоате. Может можно как-то с этим блоком разобраться, что бы всё вышло как на макете?

<main>
      <figure class="huge">
        <img src="img/greenTshirt.png" alt="">
        <figcaption>T-Shirts</figcaption>
      </figure>
      <figure class="normal">
        <img src="img/cards.png" alt="">
        <figcaption>Cards</figcaption>
      </figure>
      <figure class="normal">
        <img src="img/pens.png" alt="">
        <figcaption>Pens &amp; Pencils</figcaption>
      </figure>
      <figure class="wide">
        <img src="img/notebooks.png" alt="">
        <figcaption>Notebooks</figcaption>
      </figure>
      <figure class="normal">
        <img src="img/toys.png" alt="">
        <figcaption>Toys</figcaption>
      </figure>
      <figure class="high">
        <img src="img/bags.png" alt="">
        <figcaption>Bags</figcaption>
      </figure>
      <figure class="normal">
        <img src="img/scrum.png" alt="">
        <figcaption>Scrum cards</figcaption>
      </figure>
      <figure class="normal">
        <img src="img/magnets.png" alt="">
        <figcaption>Magnets</figcaption>
      </figure>
      <figure class="big">
        <img src="img/redCaps.png" alt="">
        <figcaption>Caps</figcaption>
      </figure>
      <figure class="normal">
        <img src="img/magnets.png" alt="">
        <figcaption>Magnets</figcaption>
      </figure>
      <figure class="normal">
        <img src="img/pens.png" alt="">
        <figcaption>Pens &amp; Pencils</figcaption>
      </figure>
      <figure class="normal">
        <img src="img/toys.png" alt="">
        <figcaption>Toys</figcaption>
      </figure>
  </main>