/* general grid wraps and rows */
.grid-wrap
{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}

.grid-row
{
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}

.grid-sub-row
{
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	grid-template-rows: auto;
}

/* grid item taking one complete row*/
.row-grid-item
{
	grid-column: 1 / -1;
}

/* define evenly spaced grids of various sizes, for use as basic layout structures */
.grid-3by3even
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, minmax(30px,auto));
}

.grid-5by10even
{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(10, minmax(20px,auto));
}

.grid-7by10even
{
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-template-rows: repeat(10, minmax(20px,auto));
}

.grid-8by16even
{
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(16, minmax(15px,auto));
}

.grid-9by15even
{
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	grid-template-rows: repeat(15, minmax(15px,auto));
}

.grid-10by20even
{
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	grid-template-rows: repeat(20, minmax(10px,auto));
}

.grid-12by40even
{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(40, minmax(10px,auto));
}

.grid-15by30even
{
	display: grid;
	grid-template-columns: repeat(15, 1fr);
	grid-template-rows: repeat(30, minmax(10px,auto));
}

.grid-20by40even
{
	display: grid;
	grid-template-columns: repeat(20, 1fr);
	grid-template-rows: repeat(40, minmax(10px,auto));
}

.grid-24by50even
{
	display: grid;
	grid-template-columns: repeat(24, 1fr);
	grid-template-rows: repeat(50, minmax(10px,auto));
}

.grid-25by50even
{
	display: grid;
	grid-template-columns: repeat(25, 1fr);
	grid-template-rows: repeat(50, minmax(10px,auto));
}

.grid-36by60even
{
	display: grid;
	grid-template-columns: repeat(36, 1fr);
	grid-template-rows: repeat(60, minmax(5px,auto));
}

.grid-12byAuto
{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: auto;
}

.grid-48byAuto
{
	display: grid;
	grid-template-columns: repeat(48, 1fr);
	grid-auto-rows: minmax(auto,auto);
}