CodePen

HTML

            
              <div class="grid">
  <div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div>
<div class="item-10">10</div>
<div class="item-11">11</div>
<div class="item-12">12</div>
<div class="item-13">13</div>
<div class="item-14">14</div>
<div class="item-15">15</div>
<div class="item-16">16</div>
<div class="item-17">17</div>
<div class="item-18">18</div>
<div class="item-19">19</div>
<div class="item-20">20</div>
<div class="item-21">21</div>
<div class="item-22">22</div>
<div class="item-23">23</div>
<div class="item-24">24</div>
<div class="item-25">25</div>
<div class="item-26">26</div>
<div class="item-27">27</div>
<div class="item-28">28</div>
<div class="item-29">29</div>
<div class="item-30">30</div>
<div class="item-31">31</div>
<div class="item-32">32</div>
<div class="item-33">33</div>
<div class="item-34">34</div>
<div class="item-35">35</div>
<div class="item-36">36</div>
<div class="item-37">37</div>
<div class="item-38">38</div>
<div class="item-39">39</div>
<div class="item-40">40</div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @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); }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*
 If you don't see a grid, please switch to a browser with CSS Grid support enabled.
 */
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................