使用css Grid可高效创建响应式卡片布局，通过display: grid、grid-template-columns、gap等属性定义容器和子项样式，结合minmax()与auto-fit实现自适应排列，无需额外js即可完成多设备适配。
用CSS Grid制作卡片布局非常直观且高效。它能让你轻松控制行、列和对齐方式，特别适合响应式设计。下面通过一个实际例子，展示如何设置网格容器和子元素，快速搭建美观的卡片布局。
创建网格容器
要启用grid布局，先为父容器设置display: grid。接着定义列宽、行高以及间距，让卡片整齐排列。
常用属性包括：
- grid-template-columns：定义每列的宽度。可用固定值（如200px）或弹性单位（如1fr）
- grid-gap 或 gap：设置卡片之间的间距
- grid-auto-rows：自动为行设定高度，适合内容不一的卡片
示例代码：
立即学习“前端免费学习笔记（深入）”；
.container { display: grid; grid-template-columns: repeat(3, 1fr); /* 三列等宽 */ gap: 16px; padding: 20px; }
设置网格子元素（卡片）
每个卡片作为Grid的子项，默认会按顺序填入网格单元格。你可以进一步控制它们的位置和跨度。
关键点：
- 无需额外设置子元素即可实现均匀分布
- 使用grid-column或grid-row让某个卡片跨列或跨行
- 可结合minmax()函数实现响应式列宽
例如，让第一个卡片横跨两列：
.card:first-child { grid-column: span 2; }
响应式自适应布局
为了让卡片在不同屏幕下表现良好，可以结合minmax()和auto-fit实现自动换行与适配。
推荐写法：
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; padding: 20px; }
这段代码的意思是：每列最小250px，最大为1fr，浏览器会自动计算最多放几列，超出则换行。手机上可能只显示一列，平板两列，桌面三列以上，完全自适应。
完整实战示例
html结构：
<div class="container"> <div class="card"><h3>卡片1</h3><p>内容描述</p></div> <div class="card"><h3>卡片2</h3><p>内容描述</p></div> <div class="card"><h3>卡片3</h3><p>内容描述</p></div> <div class="card"><h3>卡片4</h3><p>内容描述</p></div> </div>
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; padding: 20px; } <p>.card { border: 1px solid #ddd; border-radius: 8px; padding: 16px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }</p>
这样就完成了一个简洁、响应式的卡片网格布局。添加更多卡片也会自动排列，维护成本低。
基本上就这些。Grid让布局变得更简单，掌握几个核心属性就能应对大多数场景。不复杂但容易忽略细节，比如gap兼容性和旧版浏览器支持，上线前记得测试。