@import "compass/css3";

@mixin item($column, $row, $colspan: 1, $rowspan: 1) {
    -ms-grid-column: $column * 2;
    -ms-grid-row   : $row    * 2;
    @if($colspan != 1) { -ms-grid-column-span: ($colspan * 2) - 1; }
    @if($rowspan != 1) { -ms-grid-row-span   : ($rowspan * 2) - 1; }
}

.grid {
  display: -ms-grid;
  /* Sass doesn't support the bracket syntax
   * so we can't do grid-columns: 1% (1% 1fr)[12]
   * neither can we do grid-columns: 1% repeat(12, 1% 1fr);
   * So we hard code our value
   */
  -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;
}

[class^="item-"] {
  background: deepskyblue;
  padding: 5px;
}

/**
 * The first argument defines the column you want to display your item in
 * without taking count of margin-columns
 * So if you want to put your item in the 6th column, the first arg is 6
 *
 * The second argument defines the row you want to display your item in
 * without taking count of margin-rows
 * So if you want to put your item in the 3rd row, the second arg is 3
 *
 * The third argument is optional. 
 * If specified, it represents the number of columns your item will span
 * without taking count of margin-columns
 * So if you want to have a 2-columns wide item, the third arg is 2
 *
 * The fourth argument is optional. 
 * If specified, it represents the number of rows your item will span
 * without taking count of margin-rows
 * So if you want to have a 4-rows wide item, the fourth arg is 4 
 */

.item-1  { @include item(1, 1, 11); }
.item-2  { @include item(12, 1); }

.item-3  { @include item(1, 2, 10); }
.item-4  { @include item(11, 2, 2); }

.item-5  { @include item(1, 3, 9); }
.item-6  { @include item(10, 3, 3); }

.item-7  { @include item(1, 4, 8); }
.item-8  { @include item(9, 4, 4); }

.item-9  { @include item(1, 5, 7); }
.item-10 { @include item(8, 5, 5); }

.item-11 { @include item(1, 6, 6); }
.item-12 { @include item(7, 6, 6); }

.item-13 { @include item(1, 7, 5); }
.item-14 { @include item(6, 7, 2); }
.item-15 { @include item(8, 7, 5); }

.item-16 { @include item(1, 8, 4); }
.item-17 { @include item(5, 8, 4); }
.item-18 { @include item(9, 8, 4); }

.item-19 { @include item(1, 9, 3); }
.item-20 { @include item(4, 9, 3); }
.item-21 { @include item(7, 9, 3); }
.item-22 { @include item(10, 9, 3); }

.item-23 { @include item(1, 10, 2); }
.item-24 { @include item(3, 10, 2); }
.item-25 { @include item(5, 10, 2); }
.item-26 { @include item(7, 10, 2); }
.item-27 { @include item(9, 10, 2); }
.item-28 { @include item(11, 10, 2); }

.item-29 { @include item(1, 11); }
.item-30 { @include item(2, 11); }
.item-31 { @include item(3, 11); }
.item-32 { @include item(4, 11); }
.item-33 { @include item(5, 11); }
.item-34 { @include item(6, 11); }
.item-35 { @include item(7, 11); }
.item-36 { @include item(8, 11); }
.item-37 { @include item(9, 11); }
.item-38 { @include item(10, 11); }
.item-39 { @include item(11, 11); }
.item-40 { @include item(12, 11); }