使用CSS Grid可高效创建响应式卡片网格。首先设置容器display: grid，用grid-template-columns定义列数，如repeat(3, 1fr)实现三等分列，配合gap控制间距；为实现响应式，采用repeat(auto-fit, minmax(250px, 1fr))，使列数随屏幕自适应；通过align-items或justify-items统一卡片对齐方式；卡片样式可通过box-shadow、border-radius等增强视觉效果，hover时添加transform提升交互体验；若需突出某卡片，可用grid-column: span 2使其跨越多列。Grid布局结构清晰，仅需少量代码即可实现高度灵活的网格系统。
使用CSS Grid布局制作卡片网格非常高效，能轻松控制行列数量、间距以及响应式表现。下面介绍如何用Grid实现一个美观且灵活的卡片网格布局。
定义基本Grid容器
将父容器设置为display: grid，然后通过grid-template-columns和gap来控制列数和间距。
例如，创建一个每行3列、间距1rem的网格：
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
这里的repeat(3, 1fr)表示生成3个等宽列，1fr单位会平均分配可用空间。
立即学习“前端免费学习笔记（深入）”；
响应式自适应列数
为了让卡片在不同屏幕下自动调整列数，可以使用minmax()配合auto-fit或auto-fill。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
这段代码的意思是：每列最小宽度250px，最大为1fr，浏览器会根据容器宽度自动填充合适数量的列。小屏幕上可能只显示一列，大屏幕上可显示多列。
统一控制卡片样式与对齐
每个卡片建议设置一致的外观，并使用align-items或justify-items来对齐内容。
.card {
background: #fff;
border-radius: 8px;
padding: 1rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.2s;
}
<p>.card:hover {
transform: translateY(-4px);
}
如果希望所有卡片高度一致，可在容器上加上：
.card-grid {
align-items: stretch; /* 默认行为，让项目填满单元格高度 */
}
处理不规则内容的间隙问题
如果某些卡片内容较多导致高度差异明显，Grid仍能保持整齐排列。只要没有跨行跨列，默认每张卡片占据一个单元格，不会影响整体结构。
若需更复杂布局（如突出某张卡片），可用grid-column或grid-row让它跨越多列或多行：
.featured-card {
grid-column: span 2; /* 横跨两列 */
}
基本上就这些。Grid布局让卡片网格变得简单又强大，只需几行CSS就能实现专业级的响应式设计。关键是合理使用repeat、minmax和gap，再配合语义清晰的HTML结构，效果立竿见影。
