CSS中的网格布局（Grid Layout）网格轨道尺寸设置详解

网格轨道的尺寸设置是CSS Grid布局中的核心概念，它决定了网格容器中行和列的大小。网格轨道就是相邻网格线之间的空间，包括行轨道（水平方向）和列轨道（垂直方向）。

1. 基础概念
网格轨道尺寸通过grid-template-rows（定义行高）和grid-template-columns（定义列宽）设置。这些属性接受一个轨道尺寸列表，每个值对应一个轨道的尺寸。

2. 固定尺寸设置
最直接的方式是使用固定单位（如px）：

.container {
  display: grid;
  grid-template-columns: 200px 100px 150px; /* 三列：200px、100px、150px */
  grid-template-rows: 100px 50px; /* 两行：100px、50px */
}

3. 弹性尺寸设置

• fr单位：按比例分配剩余空间

grid-template-columns: 1fr 2fr 1fr; /* 三列宽度比为1:2:1 */

• auto关键字：根据内容自动调整尺寸

grid-template-columns: auto 1fr auto; /* 首尾列根据内容宽度，中间列占据剩余空间 */

4. 混合尺寸设置
实际开发中常组合使用不同单位：

grid-template-columns: 200px 1fr 2fr auto;
/* 第一列固定200px，第二列占1份剩余空间，第三列占2份，最后一列根据内容宽度 */

5. 重复模式设置
使用repeat()函数简化重复模式：

grid-template-columns: repeat(3, 1fr); /* 等价于1fr 1fr 1fr */
grid-template-rows: repeat(2, minmax(100px, auto)); /* 两行，最小高度100px */

6. 尺寸范围约束

• minmax()函数：定义尺寸范围

grid-template-columns: 200px minmax(100px, 1fr); /* 第二列最小100px，最大1fr */

• min-content/max-content：基于内容尺寸

grid-template-columns: max-content min-content; /* 第一列根据最大内容宽度，第二列根据最小内容宽度 */

7. 自动布局尺寸
当未显式定义轨道时，隐式轨道的尺寸由grid-auto-rows和grid-auto-columns控制：

.container {
  grid-template-columns: 1fr 1fr; /* 显式定义两列 */
  grid-auto-rows: 80px; /* 隐式行高统一为80px */
  grid-auto-columns: minmax(50px, 100px); /* 隐式列宽在50-100px间 */
}

8. 实际应用技巧

• 结合媒体查询实现响应式：

.container {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /* 自动适应容器宽度，每项最小250px */
}

• 复杂网格系统示例：

.grid-system {
  grid-template-columns: 
    [sidebar-start] 200px 
    [sidebar-end content-start] minmax(0, 1fr)
    [content-end];
  grid-template-rows: 
    [header] auto 
    [main] minmax(400px, 1fr) 
    [footer] 60px;
}

理解这些尺寸设置方法，可以灵活创建从简单等分布局到复杂响应式网格的各种界面结构。关键是要掌握不同单位的特性和组合方式，特别是fr单位与minmax()函数的配合使用。