如何用 Grid 实现响应式卡片布局（自动调整列数）？

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

宽屏（1200px）：4列
┌──┐ ┌──┐ ┌──┐ ┌──┐
│  │ │  │ │  │ │  │
└──┘ └──┘ └──┘ └──┘

中屏（800px）：3列
┌──┐ ┌──┐ ┌──┐
│  │ │  │ │  │
└──┘ └──┘ └──┘

窄屏（500px）：1列
┌──┐
│  │
└──┘

/* auto-fill：创建空的网格轨道 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* 只有1个卡片时，卡片宽度 = 200px，右侧留空 */

/* auto-fit：拉伸现有项目填满空间 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* 只有1个卡片时，卡片拉伸占满整个容器 */

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
  padding: 20px;
}

/* min(100%, 280px) 确保在极窄屏幕下不会溢出 */