title: Whats the best way to achieve this grid layout in CSS and HTML?
body: <p>Considerations:</p>
  <ul>
  <li>I don't know where the big cards will be</li>
  <li>The data comes from a cms so there could be less cards or more and in different orders</li>
  <li>I tried css grid but i had issues spanning the big cards because I don't know their location in the grid</li>
  <li>It would be ideal if each card could specify its size (whether it is big or normal)</li>
  </ul>
  <p>I reckon I could push back on some of the above, but the above would be the most ideal outcome. If I have to force the layout to be: Big card and 4 small cards, 4 small cards, 4 small cards and 1 big card - and repeat that layout then maybe that's what I have to do?</p>
  <p><a href="https://i.stack.imgur.com/5vpQb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5vpQb.png" alt="Layout grid design" /></a></p>