本文介绍如何使用 css grid 构建一种“无显式列、仅按行逻辑组织”的三区响应式布局：顶部左右并列两个可自适应高度的区块，底部一个横跨全宽的区块，支持内容动态撑高，无需 javascript。
本文介绍如何使用 css grid 构建一种“无显式列、仅按行逻辑组织”的三区响应式布局：顶部左右并列两个可自适应高度的区块，底部一个横跨全宽的区块，支持内容动态撑高，无需 javascript。
在实际开发中，常需实现类似“表格语义但无列约束”的布局——例如事故信息面板：顶部划分为左右两个独立数据区（如“责任方”与“事发时间”），底部为统一描述区。此时若强行套用传统 <table> 或 flex 布局，易陷入宽度计算、高度同步或 DOM 结构僵化等问题。
推荐方案：CSS Grid 布局
Grid 天然支持二维空间划分，且能精准控制区域跨度与响应行为。以下是一个简洁、健壮、语义清晰的实现：
<div class="grid-container">
<div class="top-left">
<div class="css-field">
<span class="css-label">Initiator:</span>
<span class="css-value">{{accident.initiator}}</span>
</div>
<div class="css-field">
<span class="css-label">Location:</span>
<span class="css-value">{{accident.location}}</span>
</div>
</div>
<div class="top-right">
<div class="css-field">
<span class="css-label">Date:</span>
<span class="css-value">{{accident.date | date}}</span>
</div>
<div class="css-field">
<span class="css-label">Severity:</span>
<span class="css-value">{{accident.severity}}</span>
</div>
</div>
<div class="bottom">
<div class="css-field">
<span class="css-label">Description:</span>
<span class="css-value">{{accident.description}}</span>
</div>
</div>
</div>对应 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 {
border: 1px solid #666;
padding: 12px;
background-color: #f9f9f9;
}
/* 关键：右侧区块添加加粗左边界，模拟原图中的分割线 */
.top-right {
border-left: 5px solid #000;
}
/* 底部区块横跨两列 */
.bottom {
grid-column: 1 / -1; /* 等价于 1 / span 2，更健壮 */
border: 1px solid #666;
padding: 12px;
background-color: #f5f5f5;
}
/* 字段样式复用 */
.css-field {
margin-bottom: 8px;
}
.css-label {
font-weight: bold;
color: #444;
}
.css-value {
margin-left: 8px;
color: #222;
}✅ 优势说明：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 高度自适应：所有区块均设 min-height: auto（默认），内容增多时自动撑高，无需固定 height；
- 语义清晰：DOM 结构扁平，无嵌套冗余容器，利于可访问性与维护；
- 响应友好：后续如需适配移动端，只需通过媒体查询修改 grid-template-columns: 1fr 即可一键转为垂直堆叠；
- 边界可控：利用 border-left 在 .top-right 上实现加粗分隔线，比 flex + border-right 更稳定（避免右侧溢出或渲染差异）。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免对 .grid-container 设置 overflow: hidden，否则可能裁剪动态增长的内容；
- 若需兼容 IE11，请改用 display: flex + calc(50% - 4px) 模拟双列，但会丧失 grid-column: 1 / -1 的简洁性；
- 所有 .css-field 元素建议包裹在 <div> 中而非直接子元素，确保 Grid 子项层级明确。
该方案兼顾表现力、可维护性与现代浏览器兼容性，是替代传统表格思维、构建灵活信息面板的理想选择。
