CSS Grid 通过 display: grid、grid-template-columns 和 grid-template-rows 定义网格结构，使用 gap 或 grid-gap 设置间距，实现整齐的卡片布局。例如 .container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(3, 200px); gap: 16px; } 可创建三列三行、每行高 200px、间距 16px 的布局；结合 auto-fit 或 auto-fill 与 minmax() 可实现响应式自适应，如 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 能在容器宽度变化时自动调整列数，保持最小 250px 卡片宽度；row-gap 和 column-gap 可分别设置行列间距；配合 padding、border 等样式，即可构建美观、响应式的卡片网格。
CSS Grid 能轻松实现表格式的卡片布局，通过 grid-template-rows 控制行高，配合 grid-gap 设置卡片之间的间距，让整体结构整齐美观。
定义网格容器与列布局
使用 display: grid 启用网格布局，并通过 grid-template-columns 划分卡片的列宽。比如创建一个每行三张卡片的布局：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 三等分 */
}
设置行高：grid-template-rows
grid-template-rows 可以指定每一行的高度。若希望所有行高度一致，例如每行高 200px：
.container {
grid-template-rows: repeat(3, 200px); /* 创建3行，每行200px */
}
也可使用 auto 让行高根据内容自适应：
立即学习“前端免费学习笔记（深入）”；
grid-template-rows: repeat(auto-fill, minmax(150px, auto));
添加间距：grid-gap 的作用
grid-gap（或现代语法中的 gap）用于设置行与列之间的空隙，避免卡片紧贴在一起：
.container {
gap: 16px; /* 行和列间隙均为16px */
/* 或分别设置 */
row-gap: 20px;
column-gap: 10px;
}
这样每张卡片之间都会留出呼吸空间，视觉更清晰。
完整示例：响应式卡片网格
结合以上属性，可构建一个自适应的卡片布局：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-template-rows: repeat(2, 180px);
gap: 12px;
}
.card {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
}
这个布局会在容器宽度允许时自动调整列数，保持至少 250px 宽度，最多填满一行。两行固定高度，卡片间有 12px 间隔。
基本上就这些。合理使用 grid-template-rows 和 grid-gap，再配合灵活的列设置，就能快速做出专业又整洁的表格式卡片布局。不复杂但容易忽略细节。
