don't overthink grids

grids.less

@gridGutter: 20px;
@basicGridDivisions: 12;
@basicGridSubdivisions: 4;

[class^='grid'] {
	width: 100%;
}

.grid {
	.col-loop (@i) when (@i > 0) {
		.col-subdivisions (@j) when (@j > 0) {
			.col-@{j}-@{i} {
				width: @j*100%/@i;
			}
 
			.col-subdivisions(@j - 1);
		}
		.col-subdivisions(@basicGridSubdivisions);
		.col-loop(@i - 1);
	}
	.col-loop(@basicGridDivisions);

	[class*='col-'] {
		float: left;
		padding: 0 @adminGridGutter/2;
	}
	[class*='col-']:first-of-type {
		padding-left: 0;
	}
 
	[class*='col-']:last-of-type {
		padding-right: 0;
	}

	&:after {
		content: "";
		display: table;
		clear: both;
	}
}

.grid-flex {
	display: flex;
	justify-content: space-between;

	.col {
		flex: 1;
		margin: 0 @adminGridGutter/2;

		&:first-of-type {
			margin-left: 0;
		}

		&:last-of-type {
			margin-right: 0;
		}  
	}
}