IE11 CSS Grid Workaround

file.js

// Vanilla JS version (only use one)
// this will inject new style rules into the body of the page
// see: https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/
function injectIE11Grid(){
	var ieRules = '';
	var css = document.createElement('style');
	var head = document.head || document.getElementsByTagName('head');
	css.type = 'text/css';

	for ( var i=1; i <= document.querySelectorAll('.entry-content > *').length; i++){
		ieRules += '.entry-content > *:nth-child(' + i + ') {';
		ieRules += '-ms-grid-row: ' + i + '; }';
	}
	
	css.appendChild(document.createTextNode(ieRules));
	head.appendChild(css);
}

//ESNext + jQuery version (You will need a bundler to convert this to JS IE11 can handle)
function injectIE11Grid(){
	var ieRules = '';
	for (var i=1; i <= jQuery('.entry-content > *').length; i++){
		ieRules += `
		.entry-content > *:nth-child(${i}) {
			-ms-grid-row: ${i};
		}`
	}
	$('<style>' + ieRules +'</style>').appendTo('body');
}

//Only runs on IE11
if( typeof CSS === 'undefined' ) {
        injectIE11Grid();
}