- Grid 是二维的：擅长规划整个页面的大结构。
- Flexbox 是一维的：擅长排列一行或一列的元素。
- 最佳实践：通常我们会混用。用 Grid 把页面切成几大块，然后在每一块内部用 Flexbox 来排列内容。
Grid 网页结构 Demo：经典后台布局
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grid 网页结构 Demo</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; min-height: 100vh; background-color: #f0f2f5; } .wrapper { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-rows: 60px 1fr 50px; grid-template-columns: 200px 1fr; gap: 10px; padding: 10px; } header { grid-area: header; background-color: #1890ff; color: white; display: flex; align-items: center; justify-content: center; } aside { grid-area: sidebar; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } main { grid-area: main; display: grid; grid-template-columns: 2fr 1fr; gap: 15px; } .content-primary { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); height: 600px; } .content-secondary { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); height: 300px; } footer { grid-area: footer; background-color: #333; color: white; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; } </style></head><body> <!-- 网格容器 --> <div class="wrapper"> <!-- 1. 头部 --> <header> <h1>网站头部与导航</h1> </header> <!-- 2. 侧边栏 --> <aside> <h3>侧边栏菜单</h3> <ul> <li>仪表盘</li> <li>用户管理</li> <li>订单列表</li> </ul> </aside> <!-- 3. 主内容区 (这里又是一个 Grid 容器) --> <main> <!-- 主内容左侧 --> <section class="content-primary"> <h2>主要内容区域</h2> <p>这里是文章或数据展示区。</p> </section> <!-- 主内容右侧 (侧边栏) --> <section class="content-secondary"> <h3>辅助信息</h3> <p>这里是广告或状态卡片。</p> </section> </main> <!-- 4. 底部 --> <footer> <p>© 2026 我的网站. 版权所有.</p> </footer> </div></body></html>这个写法是 CSS Grid 布局中最直观、最推荐的定义方式之一，叫做“网格模板区域”。
简单来说，这段代码的意思是：“请帮我画一个 3 行 2 列的棋盘，并给每个格子起个名字。”
我们来逐行拆解它的含义：
1. 整体结构：像画表格一样写布局
grid-template-areas: "header header" "sidebar main" "footer footer"; 2. 详细解读每一行
第一行："header header"
- 写法：两个 header 并排。
- 含义：这一行有两个格子，我都叫它们 header。
- 结果：浏览器会自动把这两个格子合并，形成一个横跨两列的“头部区域”。
第二行："sidebar main"
- 写法：左边是 sidebar，右边是 main。
- 含义：这一行有两个格子，左边的叫 sidebar（侧边栏），右边的叫 main（主内容）。
- 结果：形成左右两栏的布局。
第三行："footer footer"
- 写法：和第一行一样，两个 footer。
- 含义：底部区域也横跨两列。
