grids.js

const _ = require('underscore');
const {css} = require('styled-components');
const {media} = require('app/platforms/mixins');

class Grid {
	constructor(grid, cells) {
		this.style = {
			grid: {
				base: css`
					display: grid;

					${grid.base}
				`,
				ie: css`
					display: -ms-grid;

					${grid.ie}
				`
			},
			cells: _(cells).mapObject((ie, name) => ({
				base: css`
					grid-area: ${name};
				`,
				ie
			}))
		};
	}

	getBaseGrid = () => this.style.grid.base

	getIeGrid = () => this.style.grid.base

	getBaseCell = (name) => this.style.cells[name].base

	getIeCell = (name) => this.style.cells[name].ie
}

const namedGrid = new Grid({
	base: css`
		grid:
			'name' auto
			'info-0' auto
			/ auto;

		${media.up('md')`
			grid:
				'name info-0' auto
				/ minmax(0, 1fr) 200px;
		`}
	`,
	ie: css`
		-ms-grid-rows: auto auto;
		-ms-grid-columns: auto;

		${media.up('md')`
			-ms-grid-rows: auto;
			-ms-grid-columns: minmax(0, 1fr) 200px;
		`}
	`
}, {
	name: css`
		-ms-grid-row: 1;
		-ms-grid-column: 1;

		${media.up('md')`
			-ms-grid-row: 1;
			-ms-grid-column: 1;
		`}
	`,
	'info-0': css`
		-ms-grid-row: 2;
		-ms-grid-column: 1;

		${media.up('md')`
			-ms-grid-row: 1;
			-ms-grid-column: 2;
		`}
	`
});

console.log(
	namedGrid.getBaseGrid(),
	namedGrid.getIeGrid(),
	namedGrid.getBaseCell('name'),
	namedGrid.getIeCell('name'),
	namedGrid.getBaseCell('info-0'),
	namedGrid.getIeCell('info-0')
);

const bundleGrid = new Grid({
	base: css`
		grid:
			'name' auto
			'info-0' auto
			'info-1' auto
			'info-2' auto
			'info-3' auto
			/ auto;

		${media.up('md')`
			grid:
				'name name name name' auto
				'info-0 info-1 info-2 info-3' auto
				/ minmax(0, 1fr) minmax(0, 1fr) 200px 200px;
		`}
	`,
	ie: css`
		-ms-grid-rows: auto auto auto auto auto;
		-ms-grid-columns: auto;

		${media.up('md')`
			-ms-grid-rows: auto auto;
			-ms-grid-columns: minmax(0, 1fr) minmax(0, 1fr) 200px 200px;
		`}
	`
}, {
	name: css`
		-ms-grid-row: 1;
		-ms-grid-column: 1;

		${media.up('md')`
			-ms-grid-row: 1;
			-ms-grid-column: 1;
			-ms-grid-column-span: 4;
		`}
	`,
	'info-0': css`
		-ms-grid-row: 2;
		-ms-grid-column: 1;

		${media.up('md')`
			-ms-grid-row: 2;
			-ms-grid-column: 1;
		`}
	`,
	'info-1': css`
		-ms-grid-row: 3;
		-ms-grid-column: 1;

		${media.up('md')`
			-ms-grid-row: 2;
			-ms-grid-column: 2;
		`}
	`,
	'info-2': css`
		-ms-grid-row: 4;
		-ms-grid-column: 1;

		${media.up('md')`
			-ms-grid-row: 2;
			-ms-grid-column: 3;
		`}
	`,
	'info-3': css`
		-ms-grid-row: 5;
		-ms-grid-column: 1;

		${media.up('md')`
			-ms-grid-row: 2;
			-ms-grid-column: 4;
		`}
	`
});

console.log(
	bundleGrid.getBaseGrid(),
	bundleGrid.getIeGrid(),
	bundleGrid.getBaseCell('name'),
	bundleGrid.getIeCell('name'),
	bundleGrid.getBaseCell('info-0'),
	bundleGrid.getIeCell('info-0'),
	bundleGrid.getBaseCell('info-1'),
	bundleGrid.getIeCell('info-1'),
	bundleGrid.getBaseCell('info-2'),
	bundleGrid.getIeCell('info-2'),
	bundleGrid.getBaseCell('info-3'),
	bundleGrid.getIeCell('info-3')
);