Simplified pure CSS (almost) drop-in Bootstrap Grid replacement

grid.css

:root {
	--rows-column-count: 4;
	--rows-column-gap: 1em;
}

.row {
	display: flex;
	box-sizing: border-box;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: var(--rows-column-gap);
	margin-bottom: var(--rows-column-gap);
}

.row > .col {
	--col-width: calc(100% / var(--rows-columns-count) - (var(--rows-column-gap) - var(--rows-column-gap) / var(--rows-columns-count)));
	flex-basis: var(--col-width);
	box-sizing: border-box;
}

.row > .col-2 {
	flex-basis: calc(var(--col-width) * 2 + var(--rows-column-gap));
}

.row > .col-3 {
	flex-basis: calc(var(--col-width) * 3 + var(--rows-column-gap) * 2);
}

.row > .col-4 {
	flex-basis: calc(var(--col-width) * 4 + var(--rows-column-gap) * 4);
}

@media only screen and (max-width: 768px) {
	.row {
		display: block;
	}

	.row > .col {
		margin-bottom: var(--rows-column-gap);
	}
}