css grid and grid-child for Edge/IE11/IE10 compatibility

_grid.scss

// CSS Grid
@mixin gridcontainer($columns: $site-columns, $rows:false, $gutter: false, $guttertype: "padding") {
	display: -ms-grid;
	display: grid;
	// TODO: make the ms declaration a loop based on colums. -LR
	-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-columns: repeat($site-columns, 1fr) ;

	@include container($guttertype);

	@if $rows {
		-ms-grid-rows: $rows;
		grid-template-rows: $rows;
	}

	@if $gutter {
		// Edge/IE fallback for placing padding on all columns which makes the width a bit wider to fit the first
		// and last columns.
		max-width: $site-width + $gutter;

		@supports (display: grid) {
			grid-column-gap: $gutter; // Using padding instead for IE/Edge compatibility
			max-width: $site-width;
		}
	}
}
// gridline
// from https://css-tricks.com/browser-compatibility-css-grid-layouts-simple-sass-mixins/
@mixin grid-child ($col-start, $col-end, $row-start:false, $row-end:false, $gutter:false, $gapType:padding) {
	
	-ms-grid-column: $col-start;
	-ms-grid-column-span: $col-end - $col-start;
	grid-column: #{$col-start}/#{$col-end};
	
	@if $row-start{
		@if $row-end {
			-ms-grid-row: $row-start;
			-ms-grid-row-span: $row-end - $row-start;
			grid-row: #{$row-start}/#{$row-end};
		}
	}
	// Substituting grid gaps in favour of margins
	
	@if $gutter {
		
		padding-left: $site-gutter / 2;
		padding-right: $site-gutter / 2;
		
		@supports (display: grid) {
			padding-left: 0;
			padding-right: 0;
		}
		// @if $col-start > 1 {
		// 	#{$gapType}-left: $site-gutter / 2;// IE/Edge
		// 	//   @supports (display: grid) {
		// 	// 	padding-left: 0;
		// 	//   }
		// }
		// @if $col-end < $site-columns {
		// 	#{$gapType}-right: $site-gutter / 2;// IE/Edge
		// 	//   @supports (display: grid) {
		// 	// 	padding-right: 0;
		// 	//   }
		// }
	}
}