ie11 grid mixins

// ==========================================================
//  CSS Grid Mixins (take one)
// ==========================================================


//  global grid variables (☠ = don't touch)
$☠__ms-col-gap: null;
$☠__ms-row-gap: null;
$☠__ms-col-count: null;
$☠__ms-row-count: null;


//
//  repeat function
//
@function repeat($repeat, $stuff: 1fr){
    $list: ();
    @for $i from 1 through $repeat { $list: append($list, $stuff, space); }
    @return $list;
}

//
//  grid-column mixin 
//
@mixin grid-column($start: auto, $span: 1){
    //  grid-column-gap using left margin 
    @if $☠__ms-col-gap and not $☠__ms-col-count and $start != 1 {
        margin-left: $☠__ms-col-gap;
        @supports (grid-column-gap: 1px){ margin-left: 0; }
    }     
    -ms-grid-column: if($☠__ms-col-count, $start + $start - 1, $start);
    -ms-grid-column-span: if($☠__ms-col-count, $span + $span - 1, $span);
    grid-column: #{$start}/#{$start + $span}; 
    @content;
}

//
//  grid-row mixin
//
@mixin grid-row($start: auto, $span: 1){
    //  grid-row-gap using top margin 
    @if $☠__ms-row-gap and not $☠__ms-row-count and $start != 1 {
        margin-top: $☠__ms-row-gap;
        @supports (grid-row-gap: 1px){ margin-top: 0; }
    } 
    -ms-grid-row: if($☠__ms-row-count, $start + $start - 1, $start);
    -ms-grid-row-span: if($☠__ms-row-count, $span + $span - 1, $span);
    grid-row: #{$start}/#{$start + $span};
    @content;    
}


//
//  grid-cell mixin
//
@mixin grid-cell($col-start: auto, $col-span: 1, $row-start: auto, $row-span: 1){
    @include grid-column($col-start, $col-span);
    @include grid-row($row-start, $row-span); 
    @content;    
}


//
//  grid-area mixin 
//
@mixin grid-area($area){
    $area: map-get($grid-areas, $area);
    @include grid-column(nth($area, 1), nth($area, 2));
    @include grid-row(nth($area, 3), nth($area, 4));  
    @content;
}

//
//  grid mixin 
//
@mixin grid($grid-map){
    $cols: map-get($grid-map, cols);
    $rows: map-get($grid-map, rows);    
    $gap:  map-get($grid-map, gap);    
    $col-gap:  map-get($grid-map, col-gap);        
    $col-gap: if($col-gap,$col-gap,$gap);
    $row-gap:  map-get($grid-map, row-gap);
    $row-gap: if($row-gap,$row-gap,$gap);    

    //  if cols or rows are numbers convert to fraction lists
    @if $cols and length($cols) == 1 and unitless($cols) { $cols: repeat($cols); }
    @if $rows and length($rows) == 1 and unitless($rows) { $rows: repeat($rows); }    
    
    //  ie does not support grid gap - why we insert the gap space as a row or colum
    //  note! the first loop is to ensure cols/rows are not a multidimensional list
    //  (when generated by the repeat function) 
    $ms-cols: null;
    $ms-rows: null;    
    @if $col-gap and $cols {
        $ms-cols: ();
        @each $col in $cols { $ms-cols: if( type-of($col) == list, join($ms-cols, $col), append($ms-cols, $col)); }
        @for $i from 1 through length($ms-cols) - 1{ $ms-cols: set-nth($ms-cols, $i, nth($ms-cols,$i) $col-gap);  }
        //  globalize ms col count (used by grid-column)
        $☠__ms-col-count: length($ms-cols) !global;        
    }
    @if $row-gap and $rows {
        $ms-rows: ();        
        @each $row in $rows { $ms-rows: if( type-of($row) == list, join($ms-rows, $row), append($ms-rows, $row)); }
        @for $i from 1 through length($ms-rows) - 1 { $ms-rows: set-nth($ms-rows, $i, nth($ms-rows,$i) $row-gap); }

        //  globalize ms row count (used by grid-row)
        $☠__ms-row-count: length($ms-rows) !global;
    }
    // 
    $☠__ms-col-gap: $col-gap !global;
    $☠__ms-row-gap: $row-gap !global;


    display: -ms-grid;    
    display: grid;

    -ms-grid-columns: $ms-cols or $cols;
    -ms-grid-rows: $ms-rows or $rows;    

    grid-template-columns: $cols;
    grid-template-rows: $rows;    

    grid-column-gap: $col-gap;
    grid-row-gap: $row-gap;    
    @content;
}


// ==========================================================
//  Use example 
// ==========================================================


//
//  grid map (cols, rows, gap, col-gap, row-gap)
//
$grid: (
    cols: repeat(5, 1fr) 2fr,
    row-gap: 8px,
    col-gap: 16px
);

//
//  Grid area map (col, col-span, row, row-span)
//
$grid-areas:(
    area-51: (1, 2, 1, 2)   
);


.grid {
    //  create grid 
    @include grid($grid); 
    max-width: 800px;
    margin-left : auto;
    margin-right: auto;    
}

//  just a bit of color and padding
.grid { background-color: whitesmoke; border:1px solid #ccc; }
.cell { background-color: #ccc; padding: 5px; }



.cell-1 {
    //  grid area 
    @include grid-area(area-51);
    background-color: magenta;
    color: white;    
}

.cell-2 {
    //  grid cell (grid-column + grid-row)     
    @include grid-cell(3, 1, 2, 1);   
    background-color: rebeccapurple;
    color: white;    
}

.cell-3 {
    @include grid-column(3, 1);
    @include grid-row(1, 1);     
}

.cell-4 {
    @include grid-column(4, 1);
    @include grid-row(1, 1);     
}

.cell-5 {
    @include grid-column(4, 1);
    @include grid-row(2, 1);     
}

.cell-6 {
    @include grid-column(1, 3);
    @include grid-row(3, 1);     
}
.cell-7 {
    @include grid-column(4, 1);
    @include grid-row(3, 1);     
}

.cell-8 {
    @include grid-column(5, 2);
    @include grid-row(1, 3);     
}

.cell-9 {
    @include grid-column(1, 6);
    @include grid-row(4,1);   

    //  paddend break out 
    margin-left : calc(50% - 50vw);
    margin-right: calc(50% - 50vw);    
    padding-left : calc(50vw - 50% + 5px);
    padding-right: calc(50vw - 50% ); 

    background-color: dodgerblue;
    color: white;
}

.cell-10 {
    @include grid-column(1, 2);
    @include grid-row(5,1);   
}

.cell-11 {
    @include grid-column(4, 3);
    @include grid-row(5,1);   
}

.cell-12 {
    @include grid-column(3, 1);
    @include grid-row(5,1);   
}


.cell-13 {

    @include grid-column(2, 4);
    @include grid-row(6,1); 
    padding: 0;
    
    
    //  nested grid (TODO multi grid gaps for ie)
    @include grid((cols: repeat(4), col-gap: 16px, row-gap: 8px));
    
    //  small grid
    @media (max-width: 480px){
        @include grid-column(1, 6);
        @include grid((cols: repeat(12), col-gap: 16px, row-gap: 8px));
    }
}



.cell-13a {
    @include grid-column(1,1);
    @include grid-row(1,8);     
    background: #666;
    color: white;    
    
    //  small grid layout
    @media (max-width: 480px){ @include grid-cell(1, 8, 1,1);           
    }
}
.cell-13b {
    @include grid-column(2,1);
    @include grid-row(1, 1);     
    background: #666;
    color: white;    
    
    //  small grid layout
    @media (max-width: 480px){ @include grid-cell(9, 2, 1, 1); }    
}
.cell-13c {
    @include grid-column(3,2);
    @include grid-row(1,8);    
    background: #666;
    color: white;
    
    //  small grid layout    
    @media (max-width: 480px){ @include grid-cell(11, 2, 1, 1); }        
}


.cell-14 {
    
    @include grid-column(1,6);
    @include grid-row(7,1); 
    
    background-color: white;
    font: 10px monospace; 
    overflow: auto;
    padding: 16px;
    span { color: #999; }
    
}



//  simple css reset
html { box-sizing: border-box; }
*,*::before,*::after { bax-sizing: inherit; }
body {margin: 0; font-family: sans-serif; }