grid其他布局同样的写法

.grid{
	display: grid;
	grid-gap: 1rem;
}
@for $i from 1 through 8 {
	@media only screen and (max-width:767px) {
	.xsg#{$i} {
		grid-template-columns: repeat(#{$i}, 1fr);
	}
	}
	@media only screen and (min-width:768px) {
	.smg#{$i} {
	grid-template-columns: repeat(#{$i}, 1fr);
	}
	}
	@media only screen and (min-width:992px) {
	.mdg#{$i} {
		grid-template-columns: repeat(#{$i}, 1fr);
	}
	}
	@media only screen and (min-width:1200px) {
	.lgg#{$i} {
		grid-template-columns: repeat(#{$i}, 1fr);
	}
	}
	@media only screen and (min-width:1920px) {
	.xlg#{$i} {
		grid-template-columns: repeat(#{$i}, 1fr);
	}
	}
}

使用

<div   class="sitem grid mdg2 lgg3 xlg4">000</div>

工具站：

https://cssgr.id/