本文介绍如何通过 CSS Grid 替代传统 HTML 表格，彻底解决动态填充时因 rowspan 和单元格高度不一致导致的行间距不均问题，确保所有数据行垂直对齐、间距统一且响应式友好。

本文介绍如何通过 css grid 替代传统 html 表格，彻底解决动态填充时因 `rowspan` 和单元格高度不一致导致的行间距不均问题，确保所有数据行垂直对齐、间距统一且响应式友好。

在构建动态数据展示界面（如设备信息卡、产品规格表）时，开发者常依赖 HTML

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

实现左右分栏布局：左侧为键值对描述，右侧为固定尺寸图片。但当右侧图片通过 rowspan 跨多行时，浏览器会强制拉伸左侧空行以匹配图片高度，造成视觉上“行间距变大”——这并非真实 margin，而是 高度被撑开所致。由于数据动态生成、行数不可预知，无法通过硬编码 height 或 line-height 修复，传统表格在此场景下已显乏力。

更可靠、语义更清晰的方案是弃用表格，改用 CSS Grid 布局。Grid 天然支持二维区域划分与内容独立定位，可完全解耦标题、图片与描述列表的高度依赖关系。

以下是一个生产就绪的 Grid 实现方案：

.grid {
  width: 700px;
  display: grid;
  grid-template-columns: 1fr auto; /* 左侧自适应，右侧按内容宽度 */
  gap: 1em 8px; /* 行间距 1em，列间距 8px（替代原表格 cellpadding） */
}

.grid .heading {
  grid-column: 1 / -1; /* 横跨全部列，等效 colspan="3" */
  font-size: 1.25em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.grid .image {
  grid-column: 2; /* 固定在右侧列 */
  align-self: start; /* 防止被拉伸，顶部对齐 */
}

.grid .image img {
  max-height: 300px;
  max-width: 400px;
  width: 275px;
  height: auto;
  display: block;
}

.grid .description {
  grid-column: 1; /* 固定在左侧列 */
  display: grid;
  grid-template-columns: minmax(min-content, max-content) 1fr;
  gap: 0.25em 1ch; /* 键与值之间留出舒适间距 */
  align-content: flex-start; /* 关键！避免空行被撑高 */
}

对应 HTML 结构简洁直观：

立即学习“前端免费学习笔记（深入）”；

<div class="grid">
  <div class="heading">Name1</div>
  <div class="image">
    <img src="https://fastly.picsum.photos/..." alt="Image marker name" />
  </div>
  <div class="description">
    <span>Materials Used:</span>
    <span>product 1, product 2, product 3</span>
    <span>Compartment:</span>
    <span>Building</span>
    <span>Installation date:</span>
    <span>21/09/2023</span>
  </div>
</div>

✅ 优势总结：

• 零间隙保证：align-content: flex-start 确保所有描述项紧凑堆叠，不受右侧图片高度影响；
• 完全动态适配：无论描述项是 3 行还是 10 行，布局自动收缩/扩展，无需 JS 计算 rowspan；
• 语义化增强：用
  + 语义类名替代

，符合现代无障碍标准（屏幕阅读器更易解析）；

样式可控性高：键值对间距、对齐方式、断行行为均可独立控制，远超表格 CSS 的限制。

⚠️ 注意事项：

• 若需兼容 IE11，请添加 -ms-grid 回退方案（但建议优先考虑渐进增强）；
• minmax(min-content, max-content) 在 .description 的第一列中确保标签文字不被截断，同时避免过度撑宽；
• 图片容器 .image 必须设 align-self: start，否则 Grid 默认 stretch 会导致图片区域被拉伸变形。

这一方案不仅解决了原始问题，更将布局逻辑从“表格约束”升级为“内容驱动”，是动态数据卡片类 UI 的推荐实践。