CSS - Basic customizable content grid

grid.css

.row {
	--column-count: 12;
	--grid-gap-width: 16px;
	--column-base-min-width: calc((var(--width-grid) - (var(--column-count) - 1) * var(--grid-gap-width)) / var(--column-count));
	display: flex;
	flex-flow: column;
	gap: var(--grid-gap-width);

	@media (--bp-medium) {
		display: grid;
		grid-template-columns: repeat(var(--column-count), 1fr);
	}

	&.row--cols-2 {
		--column-count: 2;
	}

	&.row--cols-3 {
		--column-count: 3;
	}

	&.row--cols-4 {
		--column-count: 4;
	}

	@media (--bp-large) {

		&.row-lg--cols-2 {
			--column-count: 2;
		}

		&.row-lg--cols-3 {
			--column-count: 3;
		}

		&.row-lg--cols-4 {
			--column-count: 4;
		}
	}


	/* Fractional Layouts */
	&.row--66-33 {
		grid-template-columns: 3fr 1fr;
	}

	@media (--bp-large) {

		&.row-lg--66-33 {
			grid-template-columns: 3fr 1fr;
		}
	}
}