Ultimate grid system

_config.scss

$global-gutters: 2rem;
$wrapper-width : 96rem;

_grid.scss

[class*=' grid-'],
[class^='grid-'] {
	--grid-item-min-width: 1fr;

	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( var(--grid-item-min-width), 1fr ) );
	grid-gap: $global-gutters $global-gutters; grid-auto-flow: row dense; justify-items: stretch; align-items: stretch;

	// To deal with overflows
	& > * {
		min-width: 0;
	}
}

// This let you create a grid in any context
@mixin grid($from, $to, $width, $scope: '') {
	@for $i from $from through $to {
		$a: ($width / $i) - $global-gutters;
		@include media('>#{$a}') {
			#{$scope} .grid-#{$i} {
				--grid-item-min-width: #{$a};
			}
		}
	}
}

@include grid(1, 4, $wrapper-width, '.wrapper');

.grid-item-full {
	grid-column: 1 / -1;
}