用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，并规划好整体行列结构： <ul> <li>用 <code>grid-template-rows 划分三行：顶部（header）、中间内容区（含侧边栏+主体）、底部（footer）

用 grid-template-columns 划分两列：窄侧边栏 + 宽主体内容

推荐写法：
grid-template-rows: auto 1fr auto;（头尾自适应高度，中间占满剩余空间）
grid-template-columns: 250px 1fr;（侧边栏固定宽，主体弹性伸缩）

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

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

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

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

补充实用细节

让布局更健壮、易维护：

• 加 gap: 12px 统一区域间距，避免手动设 margin
• 用 minmax(250px, 250px) 替代固定像素列宽，防止小屏下溢出
• 搭配媒体查询，在手机端改为单列堆叠：
  @media (max-width: 768px) { .layout { grid-template-columns: 1fr; } aside { grid-row: 1; } main { grid-row: 2; } }
• 确保 body 和 html 高度为 100%，否则 1fr 可能不生效

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