.u1-grid-12,
.u1-grid-12 [class*="u1-cols-"] {
	position: relative;
	display: grid;
	grid-gap: 2rem 1.5rem; /*spacing default*/
	grid-template-columns: repeat(12, 1fr);
	/* Because most content really is aligned vertically to the top..
	Alternative: use .u1-place-items-center to vertically center something.
	*/
	align-items: flex-start;
}

.u1-grid-12 > * {
	grid-column: 1 / -1;
}

.u1-grid-12 [class*="u1-col-1"] {
	/*Not needed because the default is start at 1 for all columns. But mentally useful? */
	grid-column-start: 1;
}
[class*="u1-col-2"] {
	grid-column-start: 2;
}
[class*="u1-col-3"] {
	grid-column-start: 3;
}
[class*="u1-col-4"] {
	grid-column-start: 4;
}
[class*="u1-col-5"] {
	grid-column-start: 5;
}
[class*="u1-col-6"] {
	grid-column-start: 6;
}
[class*="u1-col-7"] {
	grid-column-start: 7;
}
[class*="u1-col-8"] {
	grid-column-start: 8;
}
[class*="u1-col-9"] {
	grid-column-start: 9;
}
[class*="u1-col-10"] {
	grid-column-start: 10;
}
[class*="u1-col-11"] {
	grid-column-start: 11;
}
[class*="u1-col-12"] {
	grid-column-start: 12;
}

[class*="u1-to-1"] {
	grid-column-end: 1;
}
[class*="u1-to-2"] {
	grid-column-end: 2;
}
[class*="u1-to-3"] {
	grid-column-end: 3;
}
[class*="u1-to-4"] {
	grid-column-end: 4;
}
[class*="u1-to-5"] {
	grid-column-end: 5;
}
[class*="u1-to-6"] {
	grid-column-end: 6;
}
[class*="u1-to-7"] {
	grid-column-end: 7;
}
[class*="u1-to-8"] {
	grid-column-end: 8;
}
[class*="u1-to-9"] {
	grid-column-end: 9;
}
[class*="u1-to-10"] {
	grid-column-end: 10;
}
[class*="u1-to-11"] {
	grid-column-end: 11;
}
[class*="u1-to-12"] {
	grid-column-end: 12;
}
[class*="u1-to-end"] {
	grid-column-end: -1;
}

.u1-end {
	grid-column-end: -1;
}

.u1-mobile-cols {
	/*Placeholder class to allow grid to be maintained on mobile*/
}

@media (max-width: 768px) {
	.u1-grid-12,
	.u1-grid-12 [class*="u1-cols-"]:not(.u1-mobile-cols) {
		grid-template-columns: 1fr;
	}
	.u1-grid-12 > * {
		grid-column: 1 / -1;
	}
}