CodePen

HTML

            
              <div class="grid">
  <div class="row-1 span-11 start-1">01</div>
  <div class="row-1 span-1 start-12">02</div>
  
  <div class="row-2 span-10 start-1">01</div>
  <div class="row-2 span-2 start-11">02</div>
  
  <div class="row-3 span-9 start-1">01</div>
  <div class="row-3 span-3 start-10">02</div>
  
  <div class="row-4 span-8 start-1">01</div>
  <div class="row-4 span-4 start-9">02</div>
  
  <div class="row-5 span-7 start-1">01</div>
  <div class="row-5 span-5 start-8">02</div>
  
  <div class="row-6 span-6 start-1">01</div>
  <div class="row-6 span-6 start-7">02</div>
  
  <div class="row-7 span-5 start-1">01</div>
  <div class="row-7 span-2 start-6">02</div>
  <div class="row-7 span-5 start-8">03</div>
  
  <div class="row-8 span-4 start-1">01</div>
  <div class="row-8 span-4 start-5">02</div>
  <div class="row-8 span-4 start-9">03</div>
  
  <div class="row-9 span-3 start-1">01</div>
  <div class="row-9 span-3 start-4">02</div>
  <div class="row-9 span-3 start-7">03</div>
  <div class="row-9 span-3 start-10">04</div>
  
  <div class="row-10 span-2 start-1">01</div>
  <div class="row-10 span-2 start-3">02</div>
  <div class="row-10 span-2 start-5">03</div>
  <div class="row-10 span-2 start-7">04</div>
  <div class="row-10 span-2 start-9">05</div>
  <div class="row-10 span-2 start-11">06</div>
  
  <div class="row-11 span-1 start-1">01</div>
  <div class="row-11 span-1 start-2">02</div>
  <div class="row-11 span-1 start-3">03</div>
  <div class="row-11 span-1 start-4">04</div>
  <div class="row-11 span-1 start-5">05</div>
  <div class="row-11 span-1 start-6">06</div>
  <div class="row-11 span-1 start-7">07</div>
  <div class="row-11 span-1 start-8">08</div>
  <div class="row-11 span-1 start-9">09</div>
  <div class="row-11 span-1 start-10">10</div>
  <div class="row-11 span-1 start-11">11</div>
  <div class="row-11 span-1 start-12">12</div>
</div>
  
            
          
!
via HTML Inspector

CSS

            
              .grid {
  display: -ms-grid;
  -ms-grid-columns: 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1%;
  -ms-grid-rows: 10px auto 10px auto 10px auto 10px auto 10px auto 10px auto 10px auto 10px auto 10px auto 10px auto 10px auto 10px auto 10px;
}

.grid > div { 
  background: tomato;
  padding: 5px;
}

@for $i from 1 through 12 {
    .row-#{$i} { -ms-grid-row: $i * 2; }
   .span-#{$i} { -ms-grid-column-span: ($i * 2) - 1; }
  .start-#{$i} { -ms-grid-column: $i * 2; }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................