Basic grid on LESS. Code example

LESS

@columns: 12;
@grid-width: 1200px;

.container {
	width: 100%
	max-width: @grid-width;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -1rem;
	margin-right: - 1rem;
}

.grid(@columns, @i: 1) when (@i <= @columns) {
	.col-@{i} {
		width: percentage(@i / @columns);
		padding-left: 1rem;
		padding-right: 1rem;
		flex:1;

		.grid(@columns, @i + 1);
	}
}

grid(@columns);

Now we can use our grid in the project:

<div class="container">
	<div class="row">
		<div class="col-6"><1/div>
		<div class="col-6"><1/div>
	</div>
</div>