布局与响应式设计-第12章-12.1-Grid核心概念
学习目标
- 理解Grid布局的核心术语（容器、项目、网格线、轨道、单元格、区域）
- 掌握Grid布局与Flexbox布局的适用场景差异
- 能够识别Grid布局的基本结构组成
概念讲解
Grid布局（网格布局）是CSS3引入的二维布局模型，通过将容器划分成行（Row）和列（Column）的交叉网格，实现对项目的精确位置控制。与Flexbox的一维布局不同，Grid能够同时处理行和列的对齐与分布，适用于整体页面布局或复杂的二维组件排列。
核心术语
| 术语 | 定义 | 图示位置 |
|---|---|---|
| 网格容器 | 设置display: grid的父元素，所有直接子元素自动成为网格项目 |
最外层包裹元素 |
| 网格项目 | 网格容器的直接子元素 | 容器内的子元素 |
| 网格线 | 划分网格的水平线/垂直线，自动编号（从1开始）或自定义命名 | 行线（水平）和列线（垂直） |
| 网格轨道 | 两条相邻网格线之间的空间（行轨道/列轨道），类似表格的行高和列宽 | 行轨道（高度）和列轨道（宽度） |
| 单元格 | 行轨道与列轨道交叉形成的最小单位，类似表格的单元格 | 轨道交叉区域 |
| 网格区域 | 由多个单元格组成的矩形区域，可通过grid-area命名并放置项目 |
多个相邻单元格的组合 |
Grid vs Flexbox适用场景
| 布局需求 | 推荐技术 | 原因分析 |
|---|---|---|
| 整体页面布局（多行列） | Grid | 支持二维空间分配，可同时控制行高列宽 |
| 组件内部对齐（单方向） | Flexbox | 一维布局更简洁，性能更优 |
| 不规则布局（跨行列项目） | Grid | 支持grid-column/grid-row跨轨道，轻松实现复杂排列 |
| 动态内容尺寸适应 | Flexbox | 项目尺寸可随内容自动伸缩，适合内容优先的场景 |
语法参考
启用Grid布局
/* 块级网格容器 */
.grid-container {
display: grid;
}
/* 行内网格容器 */
.inline-grid-container {
display: inline-grid;
}核心属性速查表（容器）
| 属性 | 作用 | 基础语法示例 |
|---|---|---|
grid-template-columns |
定义列轨道尺寸 | grid-template-columns: 100px 1fr auto |
grid-template-rows |
定义行轨道尺寸 | grid-template-rows: 50px 150px |
gap |
设置轨道间距（行间距/列间距） | gap: 10px 20px（行间距10px，列间距20px） |
grid-template-areas |
通过命名定义网格区域 | grid-template-areas: "header header" "sidebar main" |
实战示例
基础网格结构实现
<div class="grid-demo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<style>
/* 定义2行2列的网格 */
.grid-demo {
display: grid;
grid-template-columns: 100px 100px; /* 2列，每列100px */
grid-template-rows: 80px 80px; /* 2行，每行80px */
gap: 10px; /* 行列间距10px */
}
.item {
background: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
</style>效果说明：生成一个2×2的网格，每个单元格尺寸100px×80px，项目间有10px间距，背景色为绿色，文字居中显示。
轨道尺寸单位对比
/* 不同单位定义列轨道 */
.grid-units {
display: grid;
grid-template-columns:
150px /* 固定像素 */
30% /* 父容器宽度的30% */
1fr /* 剩余空间分配1份 */
2fr; /* 剩余空间分配2份（是1fr的2倍） */
gap: 10px;
width: 600px; /* 容器总宽度600px */
}计算逻辑：
- 固定列：150px
- 百分比列：600px × 30% = 180px
- 剩余空间：600px – 150px – 180px – 30px（gap=10px×3间距）= 240px
- 1fr = 240px ÷ (1+2) = 80px，2fr = 160px
- 最终列宽：150px, 180px, 80px, 160px
注意事项
浏览器兼容性
- 支持情况：IE11部分支持（需加
-ms-前缀且语法差异大），Chrome 57+、Firefox 52+、Safari 10.1+完全支持标准语法。 - 检测工具：使用caniuse.com/#feat=css-grid查询实时兼容性数据。
与Flexbox的选择策略
- 优先用Grid：整体页面布局、卡片网格、需要精确控制行列对齐的场景。
- 优先用Flexbox：导航栏、按钮组、内容自适应的组件（如卡片内部元素排列）。
- 混合使用：Grid作为外层整体布局，Flexbox处理内部组件的一维排列。
常见误区
- ❌ 错误：给网格项目添加
margin: auto试图居中，应使用容器的place-items属性。 - ✅ 正确：
grid-container { place-items: center; }（同时控制水平和垂直居中）。
自测题
-
Grid布局与Flexbox布局的核心区别是？
A. Grid只能用于二维布局，Flexbox只能用于一维布局
B. Grid性能优于Flexbox
C. Grid支持响应式设计，Flexbox不支持
D. Grid需要手动定义轨道，Flexbox自动分配空间 -
以下哪个属性用于定义Grid容器的列轨道尺寸？
A.grid-columns
B.grid-template-columns
C.column-definitions
D.grid-column-size -
实现一个3列等宽的网格，正确的CSS是？
A.grid-template-columns: 33.3% 33.3% 33.4%
B.grid-template-columns: repeat(3, 1fr)
C.grid-template-columns: auto auto auto
D.grid-template-columns: 100px 100px 100px
（答案：1.A 2.B 3.B）
发表回复