HTML Grid布局如何实现网页头部、侧边栏、主体与底部的经典布局

用CSS Grid可实现头部、侧边栏、主体和底部的经典布局：将容器设为grid，用grid-template-rows: auto 1fr auto和grid-template-columns: 250px 1fr划分结构，再通过grid-column/grid-row定位语义化区域，并添加gap、minmax及媒体查询提升响应性与健壮性。

用 CSS Grid 实现头部、侧边栏、主体和底部的经典布局，关键在于把整个页面容器设为网格容器，再按语义区域分配行与列，不依赖浮动或定位，结构清晰、响应友好。

定义五区域网格容器

先给最外层容器（如 <div class="layout">）启用 Grid，并规划好整体行列结构：

1. 用 grid-template-rows 划分三行：顶部（header）、中间内容区（含侧边栏+主体）、底部（footer）
2. 用 grid-template-columns 划分两列：窄侧边栏 + 宽主体内容
3. 推荐写法：

   grid-template-rows: auto 1fr auto;（头尾自适应高度，中间占满剩余空间）

   grid-template-columns: 250px 1fr;（侧边栏固定宽，主体弹性伸缩）

标记各区域并设置网格位置

HTML 中保持语义化标签（<header>、<aside>、<main>、<footer>），再通过 CSS 指定它们在网格中的位置：

1. header：跨两列，放在第一行 —— grid-column: 1 / -1; grid-row: 1;
2. aside：放在第二行第一列 —— grid-row: 2; grid-column: 1;
3. main：放在第二行第二列 —— grid-row: 2; grid-column: 2;
4. footer：跨两列，放在第三行 —— grid-column: 1 / -1; grid-row: 3;

补充实用细节

让布局更健壮、易维护：

1. 加 gap: 12px 统一区域间距，避免手动设 margin
2. 用 minmax(250px, 250px) 替代固定像素列宽，防止小屏下溢出
3. 搭配媒体查询，在手机端改为单列堆叠：

   @media (max-width: 768px) { .layout { grid-template-columns: 1fr; } aside { grid-row: 1; } main { grid-row: 2; } }

4. 确保 body 和 html 高度为 100%，否则 1fr 可能不生效

这种写法结构明确、修改灵活，比传统 float 或 inline-block 更贴近现代开发习惯。不复杂但容易忽略。