# 布局与响应式设计-第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布局 ```css /* 块级网格容器 */ .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"` | ## 实战示例 ### 基础网格结构实现 ```html ``` **效果说明**：生成一个2×2的网格，每个单元格尺寸100px×80px，项目间有10px间距，背景色为绿色，文字居中显示。 ### 轨道尺寸单位对比 ```css /* 不同单位定义列轨道 */ .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](https://caniuse.com/#feat=css-grid)查询实时兼容性数据。 ### 与Flexbox的选择策略 - **优先用Grid**：整体页面布局、卡片网格、需要精确控制行列对齐的场景。 - **优先用Flexbox**：导航栏、按钮组、内容自适应的组件（如卡片内部元素排列）。 - **混合使用**：Grid作为外层整体布局，Flexbox处理内部组件的一维排列。 ### 常见误区 - ❌ 错误：给网格项目添加`margin: auto`试图居中，应使用容器的`place-items`属性。 - ✅ 正确：`grid-container { place-items: center; }`（同时控制水平和垂直居中）。 ## 自测题 1. Grid布局与Flexbox布局的核心区别是？ A. Grid只能用于二维布局，Flexbox只能用于一维布局 B. Grid性能优于Flexbox C. Grid支持响应式设计，Flexbox不支持 D. Grid需要手动定义轨道，Flexbox自动分配空间 2. 以下哪个属性用于定义Grid容器的列轨道尺寸？ A. `grid-columns` B. `grid-template-columns` C. `column-definitions` D. `grid-column-size` 3. 实现一个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）