CSS Grid如何制作表格式卡片布局_grid-template-rows与grid-gap组合-css教程-PHP中文网

CSS Grid如何制作表格式卡片布局_grid-template-rows与grid-gap组合

P粉602998670

发布： 2025-11-29 18:37:02

原创

824人浏览过

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组合

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）用于设置行与列之间的空隙，避免卡片紧贴在一起：

神采PromeAI

将涂鸦和照片转化为插画，将线稿转化为完整的上色稿。

103

查看详情

.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;
}
<p>.card {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
}</p>

登录后复制

这个布局会在容器宽度允许时自动调整列数，保持至少 250px 宽度，最多填满一行。两行固定高度，卡片间有 12px 间隔。

基本上就这些。合理使用 grid-template-rows 和 grid-gap，再配合灵活的列设置，就能快速做出专业又整洁的表格式卡片布局。不复杂但容易忽略细节。

以上就是CSS Grid如何制作表格式卡片布局_grid-template-rows与grid-gap组合的详细内容，更多请关注php中文网其它相关文章！