<style>
//页面样式
body {margin: 0;}
* {box-sizing: border-box;}
div {background: rgba(0,0,0,.1);border-radius: 5px;padding: 10px;}
</style>

<h1>Grid</h1>

<div class="container cols-6 g-10">
	<div class="col-6 sm:col-3 md:col-2 lg:col-1">col-6 sm:col-3 md:col-2 lg:col-1</div>
	<div class="col-6 sm:col-3 md:col-2 lg:col-1">col-6 sm:col-3 md:col-2 lg:col-1</div>
	<div class="col-6 sm:col-3 md:col-2 lg:col-1">col-6 sm:col-3 md:col-2 lg:col-1</div>
	<div class="col-6 sm:col-3 md:col-2 lg:col-1">col-6 sm:col-3 md:col-2 lg:col-1</div>
	<div class="col-6 sm:col-3 md:col-2 lg:col-1">col-6 sm:col-3 md:col-2 lg:col-1</div>
	<div class="col-6 sm:col-3 md:col-2 lg:col-1">col-6 sm:col-3 md:col-2 lg:col-1</div>
	<div class="col-2">col-2</div>
	<div class="col-2">col-2</div>
	<div class="col-2">col-2</div>
	<div class="col-3">col-3</div>
	<div class="col-3">col-3</div>
	<div class="col-start-3 col-end-5">col-start-3 col-end-5</div>
	<div class="col-start-2 col-end-4">col-start-2 col-end-4</div>
	<div class="col-start-6 col-end-7 row-start-4 row-end-5">col-start-6 col-end-7 row-start-4 row-end-5</div>
</div>
$gridCSS:();

$gridCSS: join($gridCSS, (cols-0: (display:grid, grid-template-columns: none)) );
@each $item in (1,2,3,4,5,6,7,8,9,10,11,12) {
	$gridCSS: join($gridCSS, (cols-#{$item}: (display:grid, grid-template-columns:"repeat(#{$item}, 1fr)")) );
}

@each $item in (0,10,20,30,40,50) {
	$gridCSS: join($gridCSS, (g-#{$item}: (gap:"#{$item}px")) );
}

@each $item in (0,10,20,30,40,50) {
	$gridCSS: join($gridCSS, (gx-#{$item}: (column-gap:"#{$item}px")) );
}

@each $item in (0,10,20,30,40,50) {
	$gridCSS: join($gridCSS, (gy-#{$item}: (row-gap:"#{$item}px")) );
}

@each $item in (1,2,3,4,5,6,7,8,9,10,11,12) {
	$gridCSS: join($gridCSS, (col-#{$item}: (grid-column:"span #{$item} / span #{$item}")) );
}

@each $item in (1,2,3,4,5,6,7,8,9,10,11,12,13) {
	$gridCSS: join($gridCSS, (col-start-#{$item}: (grid-column-start:#{$item})) );
	$gridCSS: join($gridCSS, (col-end-#{$item}: (grid-column-end:#{$item})) );
	$gridCSS: join($gridCSS, (row-start-#{$item}: (grid-row-start:#{$item})) );
	$gridCSS: join($gridCSS, (row-end-#{$item}: (grid-row-end:#{$item})) );
}

.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
@each $className, $classStyle in $gridCSS {
	.#{$className} {
		@each $styleKey, $styleVal in $classStyle {
			@each $val in $styleVal {
				#{$styleKey} : #{$val}
			}
		}
	}
}

$breakpoints: (576px,768px,992px,1200px);
$medias: (
	"xxs": "(max-width: #{nth($breakpoints,1) - 1px})",
	"xs": "(min-width: #{nth($breakpoints,1)})",
	"sm": "(min-width: #{nth($breakpoints,2)})",
	"md": "(min-width: #{nth($breakpoints,3)})",
	"lg": "(min-width: #{nth($breakpoints,4)})"
);
$mediaIndex: 1;
@each $mediaName, $mediaRange in $medias {
	@media #{$mediaRange} {
		@each $className, $classStyle in $gridCSS {
			.#{$mediaName}\:#{$className} {
				@each $styleKey, $styleVal in $classStyle {
					@each $val in $styleVal {
						#{$styleKey} : #{$val}
					}
				}
			}
		}
		@if ($mediaIndex >= 2){
			.container {
				max-width: #{nth($breakpoints, $mediaIndex - 1)}
			}
		}
	}
	$mediaIndex: $mediaIndex + 1;
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.