<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>
@import "compass/css3";
.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; }
}
View Compiled
This Pen doesn't use any external CSS resources.