/* grid.css 栅格系统 (适合响应式) */

/* 基础：开启grid布局 */
.grid {
	display: grid;
	gap: 2rem;
	/* 栅格间距20px */
}

/* 定义列数量 */
.grid-1 {
	grid-template-columns: repeat(1, 1fr);
}

.grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
	grid-template-columns: repeat(5, 1fr);
}

.grid-6 {
	grid-template-columns: repeat(6, 1fr);
}

/* 公共对齐 */
.grid-center {
	justify-items: center;
	align-items: center;
}

.grid-start {
	justify-items: start;
	align-items: start;
}

.grid-end {
	justify-items: end;
	align-items: end;
}




/* 响应式调整（屏幕小了自动减少列数） */
@media (max-width: 1200px) {
	.grid-6 {
		grid-template-columns: repeat(4, 1fr);
	}

	.grid-5 {
		grid-template-columns: repeat(3, 1fr);
	}
}


@media (max-width: 768px) {
	.grid-3,
	.grid-6,
	.grid-5,
	.grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 374px) {

	.grid{
		gap:1.2rem;
	}
}