CSS Grid 实现无列式类表格布局：仅按行组织，支持动态高度

在实际开发中，当需要呈现结构清晰、分区明确但无需严格列对齐的数据视图时——例如事故信息面板、表单摘要区或仪表盘卡片——"类表格"布局通常是最直观的选择。然而，传统表格语义过重且灵活性差，一旦内容复杂或需要响应式调整，就会变得难以处理；而单纯使用 Flex 布局虽然灵活，但精准控制行列关系容易陷入嵌套困境。此时，CSS Grid 才是真正适用的方案——它天然支持二维布局，能够精确划分区域、定义跨度，并完美适配动态内容高度。

推荐方案：CSS Grid 布局（语义清晰 + 高度自适应）

以下方案提供一个简洁且可扩展的参考实现。先看 HTML 结构：

  

    

      Initiator:
      {{accident.initiator}}
    
    

      Location:
      {{accident.location}}
    
  
  

    

      Date:
      {{accident.date}}
    
    

      Severity:
      {{accident.severity}}
    
  
  

    

      Description:
      {{accident.description}}
    
  

对应的 CSS 也做了优化，兼顾兼容性和可维护性：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 左右均分宽度 */
  grid-template-rows: auto auto;     /* 行高由内容决定 */
  gap: 8px;                          /* 区域间统一间距 */
  border: 1px solid #333;
}

.top-left, .top-right, .bottom {
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

/* 顶部左右区域：带右侧/左侧强调边框 */
.top-left {
  border-right: 5px solid #000;
}
.top-right {
  border-left: 5px solid #000;
}

/* 底部区域：横跨两列 */
.bottom {
  grid-column: 1 / -1; /* 等价于 1 / span 2，但更健壮 */
  min-height: 60px;    /* 保证基础高度，内容增多时自动撑开 */
}

/* 行内样式：垂直居中 + 标签/值对齐 */
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px dashed #ccc;
}
.row:last-child {
  border-bottom: none;
}
.label {
  font-weight: 600;
  color: #444;
}
.value {
  color: #222;
}

关键注意事项

• 避免固定 height：很多开发者习惯使用 .row { height: 40px }，但这样一旦内容稍长，文字就会被截断。正确的做法是使用 min-height，或者让内容完全驱动高度（推荐 auto + padding 来控制视觉节奏）。
• 不要滥用 width: 50% + flex-direction: column：这种方式看似并排，但无法实现真正的"区域级"并排和跨栏，而且响应式适配非常脆弱，遇到内容变化容易崩溃。
• grid-column: 1 / -1 比 1 / span 2 更安全：当列数可能动态变化时，-1 指向隐式网格线的末尾，鲁棒性更强。如果以后想改成三列，这种写法无需修改代码。
• 语义化增强建议：如果内容本身是描述性的，可以考虑使用
  替代 .row 结构，这样对屏幕阅读器更友好，可访问性会显著提升。
• 移动端适配：别忘了添加媒体查询，将小屏设备下的 grid-template-columns 改为 1fr，grid-template-rows 改为 repeat(3, auto)，这样内容会自然堆叠成单列，提升用户体验。

总结

该方案的核心思路是：放弃僵化的表格语义和容易失控的 Flex 嵌套，利用 CSS Grid 的二维控制能力来解决问题。通过 grid-template-columns 定义列宽、grid-column 控制跨列行为以及 auto 行高适应动态内容，最终实现一个结构清晰、扩展性强、响应友好且高度自适应的"类表格"布局。它既满足视觉分区需求，又保留了现代 CSS 的简洁性与可维护性——对于不需要严格列对齐的非关系型数据展示，这确实是一个比传统表格更聪明的选择。