本文介绍如何利用 CSS Grid 构建一种“伪表格”布局——不依赖传统 或列式结构，而是通过灵活的网格划分实现顶部双分区、底部跨栏的响应式行式布局，支持内容动态撑高。

本文介绍如何利用 css grid 构建一种“伪表格”布局——不依赖传统 `

` 或列式结构，而是通过灵活的网格划分实现顶部双分区、底部跨栏的响应式行式布局，支持内容动态撑高。

在实际开发中，有时需要呈现类似表格的视觉结构（如信息分组面板），但又无需真正的列对齐或表语义，尤其当数据天然按“逻辑行”组织、且顶部需左右并列、底部需全宽展示时，传统 display: table 或 flex 方案容易陷入嵌套复杂、高度同步困难等问题。此时，CSS Grid 是更简洁、可控的解决方案。

✅ 推荐方案：CSS Grid 布局

核心思路是将容器定义为网格，明确划分三块区域：

• 顶部左侧（.top-left）
• 顶部右侧（.top-right）
• 底部通栏（.bottom，横跨两列）

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 两等宽列 */
  grid-template-rows: auto auto;     /* 行高由内容自适应 */
  gap: 8px;                          /* 区域间间距 */
  border: 1px solid #333;
}

.top-left,
.top-right {
  border: 1px solid #666;
  padding: 12px;
  min-height: 60px; /* 防止空内容时塌陷，可移除以完全弹性 */
}

/* 右侧加粗左边界，模拟原图中的分隔线 */
.top-right {
  border-left: 5px solid black;
}

/* 底部区域跨两列，占据整行 */
.bottom {
  grid-column: 1 / -1; /* 等价于 1 / span 2，更健壮 */
  border: 1px solid #666;
  padding: 12px;
}

对应 HTML 结构简洁清晰：

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

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

下载

<div class="grid-container">
  <div class="top-left">
    <div class="row">
      <span class="label">Initiator:</span>
      <span class="value">{{accident.initiator}}</span>
    </div>
    <div class="row">
      <span class="label">Location:</span>
      <span class="value">{{accident.location}}</span>
    </div>
  </div>

  <div class="top-right">
    <div class="row">
      <span class="label">Date:</span>
      <span class="value">{{accident.date | date}}</span>
    </div>
    <div class="row">
      <span class="label">Severity:</span>
      <span class="value">{{accident.severity}}</span>
    </div>
  </div>

  <div class="bottom">
    <h3>Additional Details</h3>
    <p>{{accident.description}}</p>
  </div>
</div>

⚠️ 关键注意事项

• 避免固定高度：原问题中 height: 40px 会截断长内容。Grid 的 auto 行高 + min-height 组合可兼顾最小显示空间与动态伸展。
• 语义化优先：若数据本质为表格（如行列强关联、需屏幕阅读器支持），仍建议用

；本方案适用于视觉分组而非数据表格。

响应式增强：在小屏下可添加媒体查询，将 grid-template-columns: 1fr 1fr 改为 1fr，使顶部区域垂直堆叠：

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .top-right { border-left: none; border-top: 5px solid black; }
}

Flex 替代方案局限性：flex-direction: column 无法自然实现“顶部双列+底部单列”的混合布局，需额外 wrapper 层，增加 DOM 复杂度与样式耦合。

✅ 总结

CSS Grid 不仅能精准控制二维布局，其 grid-column 跨列能力与 auto 行高特性，完美契合“无列、仅按逻辑行组织”的需求。相比 Flexbox 的线性约束和 Table 的语义绑定，Grid 提供了更直观、可维护、且响应友好的实现路径——尤其适合仪表盘、表单摘要、事故信息面板等场景。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！