# 布局与响应式设计-第12章-12.2-轨道定义与对齐 ## 学习目标 - 掌握Grid布局中轨道（行/列）的核心定义方法 - 熟练使用`grid-template-columns`和`grid-template-rows`创建基础网格 - 理解并应用`fr`单位、`repeat()`函数和`minmax()`函数进行灵活轨道配置 - 掌握网格项目在单元格内的对齐方式（`justify-items`/`align-items`） - 学会使用`gap`属性控制轨道间距 ## 概念讲解 在Grid布局中，**轨道（Track）** 是指网格容器中由网格线分隔的行或列。轨道定义是创建网格布局的基础，通过明确行高和列宽，我们可以精确控制网格的整体结构。轨道定义与对齐系统共同构成了Grid布局的核心能力，使其能够实现复杂的二维布局。 与Flexbox的一维布局不同，Grid布局的轨道定义具有以下特点： - 支持同时定义行和列的尺寸 - 提供多种单位（固定/百分比/弹性/最小值最大值） - 支持自动填充和自适应内容尺寸 - 内置间距控制机制 - 强大的对齐系统（水平/垂直双向对齐） ## 语法参考 ### 核心属性速查表 | 属性 | 作用 | 基础语法 | 关键取值 | | ----------------------- | ------------ | ------------------------------------ | ---------------------------------------------------- | | `grid-template-columns` | 定义列轨道 | `grid-template-columns: +` | ``/``/`fr`/`repeat()`/`minmax()` | | `grid-template-rows` | 定义行轨道 | `grid-template-rows: +` | 同上 | | `gap` | 设置轨道间距 | `gap: ` | ``/`` | | `justify-items` | 水平对齐项目 | `justify-items: ` | `start`/`center`/`end`/`stretch` | | `align-items` | 垂直对齐项目 | `align-items: ` | 同上 | | `place-items` | 简写对齐属性 | `place-items: ` | 同上 | ### 轨道尺寸单位详解 #### 1. 固定尺寸单位 - **像素（px）**：固定像素宽度，不随容器变化 ```css /* 3列固定宽度 */ .container { grid-template-columns: 200px 200px 200px; } ``` - **em/rem**：相对字体大小的单位 ```css /* 基于根字体大小的响应式列 */ .container { grid-template-columns: 10rem 15rem 10rem; } ``` #### 2. 弹性单位（fr） `fr`（fraction）表示剩余空间的比例分配单位，自动计算容器可用空间 ```css /* 3列等宽（每列占1份剩余空间） */ .container { grid-template-columns: 1fr 1fr 1fr; } /* 比例分配（1:2:1） */ .container { grid-template-columns: 1fr 2fr 1fr; } ``` #### 3. 重复函数（repeat()） 用于创建重复的轨道模式，语法：`repeat(, )` ```css /* 等价于 1fr 1fr 1fr */ .container { grid-template-columns: repeat(3, 1fr); } /* 复杂重复模式 */ .container { grid-template-columns: repeat(2, 1fr 2fr); /* 1fr 2fr 1fr 2fr */ } ``` #### 4. 最小值最大值函数（minmax()） 定义轨道的取值范围，语法：`minmax(, )` ```css /* 列宽最小200px，最大1fr */ .container { grid-template-columns: minmax(200px, 1fr) 2fr; } /* 自动填充列（至少200px，自动换行） */ .container { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } ``` ### 对齐方式详解 Grid布局提供了强大的对齐系统，可从两个维度控制项目在单元格内的对齐： #### 1. 水平对齐（justify-items） - `start`：项目靠单元格左侧对齐 - `center`：项目在单元格内水平居中 - `end`：项目靠单元格右侧对齐 - `stretch`：项目拉伸填满单元格宽度（默认值） #### 2. 垂直对齐（align-items） - `start`：项目靠单元格顶部对齐 - `center`：项目在单元格内垂直居中 - `end`：项目靠单元格底部对齐 - `stretch`：项目拉伸填满单元格高度（默认值） #### 3. 简写属性（place-items） 同时设置垂直和水平对齐： ```css .container { place-items: center center; /* 垂直居中 + 水平居中 */ place-items: start end; /* 顶部对齐 + 右侧对齐 */ } ``` ## 实战示例 ### 示例1：基础轨道定义 **需求**：创建一个3列2行的基础网格，列宽分别为150px、1fr、2fr，行高分别为100px和auto ```html ``` **效果解析**： - 第1列固定150px，第2列和第3列按1:2比例分配剩余空间 - 第1行固定100px高度，第2行高度由内容决定 - 网格项目之间横向间距20px，纵向间距10px ### 示例2：响应式自动填充网格 **需求**：创建一个自适应列数的产品网格，每列最小250px，自动填充容器宽度 ```html ``` **效果解析**： - 使用`auto-fill`自动计算可容纳的列数 - `minmax(250px, 1fr)`确保列宽不小于250px，多余空间平均分配 - 在不同屏幕尺寸下自动调整列数（大屏多列，小屏少列） ### 示例3：网格项目对齐方式 **需求**：创建一个2x2网格，演示不同对齐方式的效果对比 ```html ``` **效果解析**： - 容器设置了固定高度400px，大于内容总高度 - `justify-items: center`使项目在单元格内水平居中 - `align-items: center`使项目在单元格内垂直居中 - 所有项目将显示在各自单元格的正中心位置 ## 注意事项 ### 1. 轨道尺寸计算规则 - 固定尺寸（px）轨道优先分配空间 - 百分比轨道基于容器可用空间计算 - `fr`单位分配剩余空间（扣除固定尺寸和百分比后的空间） - 当轨道总尺寸超过容器尺寸时，`fr`单位轨道会被压缩 ### 2. `auto-fill`与`auto-fit`的区别 - **`auto-fill`**：尽可能创建更多轨道，即使没有足够项目填充 - **`auto-fit`**：折叠空轨道，仅保留有项目的轨道 ```css /* 容器宽度足够时表现相同，空间不足时行为不同 */ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); ``` ### 3. 对齐属性的作用范围 - `justify-items`/`align-items`设置**所有项目**的默认对齐方式 - 可通过`justify-self`/`align-self`为**单个项目**设置对齐方式，覆盖容器默认值 ### 4. 浏览器兼容性 - IE11部分支持Grid布局，需要添加`-ms-`前缀且语法有差异 - 推荐使用Autoprefixer自动处理前缀 - 移动端建议使用Flexbox作为Grid的降级方案 ## 自测题 1. 如何使用Grid创建一个5列等宽的网格布局？ 2. `grid-template-columns: repeat(3, 1fr 2fr)`会创建怎样的列结构？ 3. 解释`minmax(100px, 1fr)`的含义及适用场景。 4. 如何让网格项目在单元格内实现右下角对齐？ 5. `gap`属性与传统的`margin`相比有什么优势？ ## 扩展阅读 - [MDN Grid布局指南](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout) - [CSS-Tricks Grid布局完整指南](https://css-tricks.com/snippets/css/complete-guide-grid/) - [Grid by Example](https://gridbyexample.com/) - Rachel Andrew的Grid布局实例库 > ⚠️ 注意：Grid布局是CSS中最强大的布局系统，但也有一定学习曲线。建议先掌握基础轨道定义和对齐方式，再逐步学习网格线命名、网格区域等高级特性。实际项目中，可结合浏览器开发者工具的Grid调试功能（Elements面板中的Grid图标）辅助开发。