<div class="grid grid-cols-1 md:grid-cols-4 gap-4 lg:grid-cols-6">
  <!-- 1 Large box spanning 2x2 -->
  <div class="rounded-xl md:col-span-2 md:row-span-2"></div>
  <!-- 2 Tall box spanning 2 rows -->
  <div class="rounded-xl md:row-span-2"></div>
  <!-- 3 Regular box -->
  <div class="rounded-xl md:row-span-3 lg:row-span-2"></div>
  <!-- 4 Wide box spanning 2 columns -->
  <div class="rounded-xl md:col-span-2"></div>
  <!-- 5 Tall box spanning 2 rows -->
  <div class="rounded-xl md:row-span-2 lg:col-span-2"></div>
  <!-- 6 Regular boxes -->
  <div class="rounded-xl md:col-span-2"></div>
  <!-- 7  box -->
  <div class="rounded-xl lg:col-span-2"></div>
  <!-- 8 Wide box spanning 3 columns -->
  <div class="rounded-xl md:col-span-3"></div>
  <!-- 9 Regular boxes -->
  <div class="rounded-xl lg:col-span-2"></div>
  <!-- 10 box -->
  <div class="rounded-xl col-span-full lg:col-span-1"></div>
</div>