布局与响应式设计-第12章-12.2-轨道定义与对齐

学习目标

• 掌握Grid布局中轨道（行/列）的核心定义方法
• 熟练使用grid-template-columns和grid-template-rows创建基础网格
• 理解并应用fr单位、repeat()函数和minmax()函数进行灵活轨道配置
• 掌握网格项目在单元格内的对齐方式（justify-items/align-items）
• 学会使用gap属性控制轨道间距

概念讲解

在Grid布局中，轨道（Track） 是指网格容器中由网格线分隔的行或列。轨道定义是创建网格布局的基础，通过明确行高和列宽，我们可以精确控制网格的整体结构。轨道定义与对齐系统共同构成了Grid布局的核心能力，使其能够实现复杂的二维布局。

与Flexbox的一维布局不同，Grid布局的轨道定义具有以下特点：

• 支持同时定义行和列的尺寸
• 提供多种单位（固定/百分比/弹性/最小值最大值）
• 支持自动填充和自适应内容尺寸
• 内置间距控制机制
• 强大的对齐系统（水平/垂直双向对齐）

语法参考

核心属性速查表

轨道尺寸单位详解

1. 固定尺寸单位

• 像素（px）：固定像素宽度，不随容器变化

  /* 3列固定宽度 */
  .container {
    grid-template-columns: 200px 200px 200px;
  }

• em/rem：相对字体大小的单位

  /* 基于根字体大小的响应式列 */
  .container {
    grid-template-columns: 10rem 15rem 10rem;
  }

2. 弹性单位（fr）

fr（fraction）表示剩余空间的比例分配单位，自动计算容器可用空间

/* 3列等宽（每列占1份剩余空间） */
.container {
  grid-template-columns: 1fr 1fr 1fr;
}

/* 比例分配（1:2:1） */
.container {
  grid-template-columns: 1fr 2fr 1fr;
}

3. 重复函数（repeat()）

用于创建重复的轨道模式，语法：repeat(, )

/* 等价于 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(, )

/* 列宽最小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）

同时设置垂直和水平对齐：

.container {
  place-items: center center; /* 垂直居中 + 水平居中 */
  place-items: start end;     /* 顶部对齐 + 右侧对齐 */
}

实战示例

示例1：基础轨道定义

需求：创建一个3列2行的基础网格，列宽分别为150px、1fr、2fr，行高分别为100px和auto

<div class="basic-grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

<style>
.basic-grid {
  display: grid;
  /* 3列定义：固定宽度 + 1份弹性 + 2份弹性 */
  grid-template-columns: 150px 1fr 2fr;
  /* 2行定义：固定高度 + 自适应内容高度 */
  grid-template-rows: 100px auto;
  /* 轨道间距：行间距10px，列间距20px */
  gap: 10px 20px;
  padding: 10px;
  border: 2px solid #333;
}

.item {
  background: #4CAF50;
  color: white;
  padding: 20px;
  font-size: 1.2rem;
  text-align: center;
}
</style>

效果解析：

• 第1列固定150px，第2列和第3列按1:2比例分配剩余空间
• 第1行固定100px高度，第2行高度由内容决定
• 网格项目之间横向间距20px，纵向间距10px

示例2：响应式自动填充网格

需求：创建一个自适应列数的产品网格，每列最小250px，自动填充容器宽度

<div class="product-grid">
  <div class="product-card">产品1</div>
  <div class="product-card">产品2</div>
  <div class="product-card">产品3</div>
  <div class="product-card">产品4</div>
  <div class="product-card">产品5</div>
</div>

<style>
.product-grid {
  display: grid;
  /* 自动填充列，每列最小250px，最大1fr */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.product-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  padding: 20px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

效果解析：

• 使用auto-fill自动计算可容纳的列数
• minmax(250px, 1fr)确保列宽不小于250px，多余空间平均分配
• 在不同屏幕尺寸下自动调整列数（大屏多列，小屏少列）

示例3：网格项目对齐方式

需求：创建一个2×2网格，演示不同对齐方式的效果对比

<div class="alignment-demo">
  <div class="demo-item">1</div>
  <div class="demo-item">2</div>
  <div class="demo-item">3</div>
  <div class="demo-item">4</div>
</div>

<style>
.alignment-demo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 150px 150px;
  gap: 10px;
  height: 400px; /* 容器高度大于内容高度，便于观察对齐效果 */
  border: 2px solid #333;
  padding: 10px;

  /* 水平居中 + 垂直居中 */
  justify-items: center;
  align-items: center;

  /* 等价简写 */
  /* place-items: center center; */
}

.demo-item {
  background: #2196F3;
  color: white;
  padding: 15px;
  font-size: 1.5rem;
  width: 80px; /* 固定宽度，便于观察对齐效果 */
  height: 80px; /* 固定高度 */
}
</style>

效果解析：

• 容器设置了固定高度400px，大于内容总高度
• justify-items: center使项目在单元格内水平居中
• align-items: center使项目在单元格内垂直居中
• 所有项目将显示在各自单元格的正中心位置

注意事项

1. 轨道尺寸计算规则

• 固定尺寸（px）轨道优先分配空间
• 百分比轨道基于容器可用空间计算
• fr单位分配剩余空间（扣除固定尺寸和百分比后的空间）
• 当轨道总尺寸超过容器尺寸时，fr单位轨道会被压缩

2. auto-fill与auto-fit的区别

• auto-fill：尽可能创建更多轨道，即使没有足够项目填充
• auto-fit：折叠空轨道，仅保留有项目的轨道

/* 容器宽度足够时表现相同，空间不足时行为不同 */
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布局指南
• CSS-Tricks Grid布局完整指南
• Grid by Example – Rachel Andrew的Grid布局实例库

> ⚠️ 注意：Grid布局是CSS中最强大的布局系统，但也有一定学习曲线。建议先掌握基础轨道定义和对齐方式，再逐步学习网格线命名、网格区域等高级特性。实际项目中，可结合浏览器开发者工具的Grid调试功能（Elements面板中的Grid图标）辅助开发。