使用CSS Grid可轻松创建响应式卡片布局。通过设置display: grid、grid-template-columns配合auto-fit和minmax(250px, 1fr)，实现容器自动换行排列，gap定义间距，每列等宽且最小250px；结合.card样式统一外观，如背景、圆角、阴影等，提升视觉一致性。
使用 CSS Grid 创建卡片布局非常直观且灵活。只需要几行代码，就能实现响应式的多列卡片排列。
基本的 Grid 卡片容器设置
给父容器设置 display: grid，并定义列数和间距即可。
常用属性：- grid-template-columns：定义每列的宽度
- gap：设置卡片之间的间距
- grid-auto-rows（可选）：统一行高
示例代码：
.card-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
gap: 20px;
}
响应式自适应列数
为了让卡片在不同屏幕下自动调整列数，可以用 minmax() 配合 auto-fit 或 auto-fill。
立即学习“前端免费学习笔记（深入）”；
.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
说明：每张卡片最小 250px，最大 1fr，容器会根据空间自动换行排列。
卡片样式建议
每个卡片可以设置一致的外观和内边距，提升视觉整齐度。
.card {
background: white;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
/* 可添加:hover效果等
}
完整简单示例
HTML 结构：
卡片1卡片2卡片3卡片4
CSS 样式：
.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.card {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
text-align: center;
}
基本上就这些，不复杂但容易忽略细节。只要掌握 repeat(auto-fit, minmax()) 这个组合，大多数卡片布局都能轻松应对。
