前端编程课程二十一、：CSS布局五 Grid 网格布局

现代布局（二维布局首选）

第一节：Grid 核心概念

1.1 Grid vs Flexbox

Flexbox：一维布局（行或列），适合"线性排列"；

Grid：二维布局（行+列），适合"网格状排列"；

核心场景：页面整体结构、复杂卡片网格、需要同时控制行和列的布局。

1.2 Grid 核心术语

Grid容器 ：设置display: grid的元素；

Grid项目：容器的直接子元素；

网格线：划分网格的水平线/垂直线（从1开始计数）；

网格轨道：两条网格线之间的空间（行/列）；

网格单元格：行和列交叉的最小单位；

网格区域：多个单元格组成的矩形区域。

第二节：Grid容器的核心属性

|-----------------------|----------|------------------------------------------------|
| 属性 | 作用 | 常用取值 |
| display | 转为Grid容器 | grid（块级）/ inline-grid（行内块） |
| grid-template-columns | 定义列尺寸 | 100px / 1fr / repeat(3, 1fr) / auto |
| grid-template-rows | 定义行尺寸 | 同列尺寸 |
| gap | 网格间距 | 10px（行+列）/ 10px 20px（行/列） |
| grid-template-areas | 定义网格区域 | "header header" "sidebar main" "footer footer" |
| justify-items | 单元格内水平对齐 | start / center / end / stretch |
| align-items | 单元格内垂直对齐 | 同上 |

2.1 核心实战1：基础网格（3列2行）

2.2 核心实战2：页面整体布局（Grid Areas）

|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <div class="page-grid"> <header class="header">Header</header> <aside class="sidebar">Sidebar</aside> <main class="main">Main Content</main> <footer class="footer">Footer</footer> </div> <style> .page-grid { display: grid; grid-template-columns: 200px 1fr; /* 侧边栏200px，主内容自适应 */ grid-template-rows: 60px 1fr 40px; /* 头部60px，主内容自适应，底部40px */ grid-template-areas: "header header" /* 头部占2列 */ "sidebar main" /* 侧边栏1列，主内容1列 */ "footer footer"; /* 底部占2列 */ gap: 10px; height: 100vh; /* 占满视口高度 */ padding: 10px; box-sizing: border-box; } .header { grid-area: header; background-color: #2196f3; color: #fff; line-height: 60px; text-align: center; } .sidebar { grid-area: sidebar; background-color: #ffebee; padding: 10px; } .main { grid-area: main; background-color: #e8f5e9; padding: 10px; } .footer { grid-area: footer; background-color: #f5f5f5; line-height: 40px; text-align: center; } </style> |

第三节：Grid项目的核心属性

|--------------|-----------|-------------------------------|
| 属性 | 作用 | 示例 |
| grid-column | 控制列位置 | grid-column: 1 / 3（跨2列） |
| grid-row | 控制行位置 | grid-row: 2 / 4（跨2行） |
| grid-area | 控制区域/位置 | grid-area: header / 2 / 1 / 3 |
| justify-self | 单个单元格水平对齐 | center / start / end |
| align-self | 单个单元格垂直对齐 | 同上 |

3.1 实战：项目跨行列

第四节：布局方案选择指南与综合实战

4.1 布局方案选择优先级

简单布局（单行/单列）→ Flexbox；
复杂布局（行+列）→ Grid；
精准定位（弹窗/吸顶）→ Position；
兼容老旧浏览器 → 浮动+定位。

4.2 综合实战：电商首页布局（Grid+Flex结合）

需求：

✅ 头部：Logo（左）+ 导航（中）+ 登录按钮（右）→ Flex；

✅ 主体：轮播图（全宽）+ 商品分类（左）+ 商品列表（右，网格）→ Grid+Flex；

✅ 底部：版权信息（居中）→ Flex；

核心代码框架：

|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <div class="shop-page"> <header class="shop-header"> <div class="logo">Logo</div> <nav class="shop-nav">导航</nav> <div class="login">登录</div> </header> <main class="shop-main"> <div class="banner">轮播图</div> <div class="category">商品分类</div> <div class="goods-list">商品列表（Grid）</div> </main> <footer class="shop-footer">版权信息</footer> </div> <style> .shop-page { display: grid; grid-template-rows: 60px 1fr 40px; height: 100vh; } .shop-header { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .shop-main { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 200px 1fr; grid-template-areas: "banner banner" "category goods-list"; gap: 10px; padding: 10px; } .banner { grid-area: banner; background: #e3f2fd; } .category { grid-area: category; background: #ffebee; } .goods-list { grid-area: goods-list; display: grid; /* 商品列表用Grid */ grid-template-columns: repeat(4, 1fr); gap: 10px; } .shop-footer { display: flex; justify-content: center; align-items: center; background-color: #f5f5f5; } </style> |

核心知识点总结

布局分层学习：先掌握文档流/浮动/定位（传统布局），再学习Flex/Grid（现代布局），循序渐进；
方案选择逻辑：一维布局用Flex，二维布局用Grid，精准定位用Position，简单并排可考虑浮动；
核心痛点解决：Flex彻底解决垂直居中、空间均分问题，Grid解决复杂二维布局问题；
实战原则：优先使用现代布局（Flex/Grid），仅在兼容老旧浏览器时使用传统布局。

前端编程 课程二十一、：CSS布局五 Grid 网格布局

前端编程课程二十一、：CSS布局五 Grid 网格布局