本文介绍如何利用 css grid 精确控制页面上 8 个独立表格的布局，实现类似四行三列（含跨区域）的响应式网格排布，兼顾结构清晰性与视觉一致性。

在现代网页开发中，将多个表格（尤其是语义与数据彼此独立的表格）整齐、可控地组织在同一页面上，不应依赖过时的

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

嵌套或浮动布局，而应采用语义清晰、控制力强的 CSS Grid。针对 8 个表格需按特定区域分布（如图示：左上双行高、右侧纵向堆叠、中部宽幅占位等），Grid 的 grid-area 定位是最直接高效的方案。

✅ 推荐实现步骤

1. 包裹容器启用 Grid：为外层容器（如 #container）设置 display: grid，并定义整体网格轨道；

2. 合理划分行列比例：根据视觉权重分配 grid-template-rows 与 grid-template-columns。例如：

   grid-template-rows: 30% 30% 25% 15%; /* 四行，高度递减 */
   grid-template-columns: 1fr 1fr 1fr;   /* 三列等宽 */

3. 为每个表格容器指定精确区域：使用 grid-area: row-start / col-start / row-end / col-end（注意：行/列号从 1 开始计数）。例如：

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

   • 左上大表（占第1–2行、第1列）→ grid-area: 1 / 1 / 3 / 2;
   • 右侧纵向四表（各占1行、第3列）→ 分别设为 1/3/2/4、2/3/3/4、3/3/4/4、4/3/5/4

4. 确保表格自适应填充：对所有 table 元素设置：

   #container table {
     width: 100%;
     height: 100%;
     border-collapse: collapse; /* 可选：优化边框显示 */
   }

? 完整精简示例（含 HTML + CSS）

<!DOCTYPE html>
<html>
<head>
<style>
html, body { margin: 0; padding: 0; }
#container {
  display: grid;
  grid-template-rows: 30% 30% 25% 15%;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px; /* 推荐添加适度间距，提升可读性 */
  width: 100vw;
  height: 100vh;
  padding: 12px;
}

/* 每个 div 对应一个表格容器，按需调整 grid-area */
#div1 { grid-area: 1 / 1 / 3 / 2; }
#div2 { grid-area: 3 / 1 / 4 / 2; }
#div3 { grid-area: 4 / 1 / 5 / 2; }
#div4 { grid-area: 1 / 2 / 5 / 3; }
#div5 { grid-area: 1 / 3 / 2 / 4; }
#div6 { grid-area: 2 / 3 / 3 / 4; }
#div7 { grid-area: 3 / 3 / 4 / 4; }
#div8 { grid-area: 4 / 3 / 5 / 4; }

#container table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}
</style>
</head>
<body>
<div id="container">
  <div id="div1"><table><tr><td>Table 1</td><td>Data</td></tr></table></div>
  <div id="div2"><table><tr><td>Table 2</td></tr></table></div>
  <div id="div3"><table><tr><td>Table 3</td></tr></table></div>
  <div id="div4"><table><tr><td>Table 4</td><td>Wide</td></tr></table></div>
  <div id="div5"><table><tr><td>Table 5</td></tr></table></div>
  <div id="div6"><table><tr><td>Table 6</td></tr></table></div>
  <div id="div7"><table><tr><td>Table 7</td></tr></table></div>
  <div id="div8"><table><tr><td>Table 8</td></tr></table></div>
</div>
</body>
</html>

⚠️ 注意事项与优化建议

• 移除调试样式：示例中 background-color 和 100vh/100vw 仅用于可视化定位，上线前请删除或替换为实际尺寸约束（如 min-height: 800px）；
• 响应式增强：可在 @media 查询中为小屏幕切换为单列堆叠（grid-template-columns: 1fr），保障移动端可用性；
• 可访问性提醒：每个

应包含

或 aria-label，明确说明其数据主题；

性能提示：避免对大量表格强制 height: 100% 导致重排压力；若内容高度差异大，可改用 min-height + flex 内部居中。

通过 Grid 布局，你不仅解决了“8 表格定位难”的问题，更构建了可维护、可扩展、符合现代标准的多数据视图结构。