CSS网格轨道

CSS网格轨道是CSS网格布局（Grid Layout）中的核心概念之一，指网格容器（Grid Container）中的行（rows）或列（columns）形成的空间。轨道是网格布局的基础结构，开发者通过定义轨道的数量、大小和排列方式来实现复杂的页面布局。

基本概念

网格轨道由网格线（Grid Lines）划分而成，可以是水平（行轨道）或垂直（列轨道）。轨道的尺寸可以通过固定值（如像素）、弹性单位（如`fr`）或动态单位（如`auto`）定义。

例如，以下代码定义了一个包含3列和2行的网格：

.grid-container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr; /* 3列轨道 */
  grid-template-rows: auto 150px;       /* 2行轨道 */
}

轨道尺寸单位

• 固定值：如`px`、`em`。
• 百分比：基于网格容器的尺寸。
• 弹性单位（fr）：按比例分配剩余空间。
• auto：根据内容自动调整。

定义轨道

显式轨道

通过`grid-template-columns`和`grid-template-rows`显式定义轨道。例如：

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3列 */
  grid-template-rows: 100px auto;       /* 2行 */
}

隐式轨道

当网格项（Grid Items）超出显式轨道范围时，浏览器会自动生成隐式轨道，其尺寸由`grid-auto-rows`和`grid-auto-columns`控制：

.grid {
  grid-auto-rows: 50px; /* 隐式行轨道高度 */
}

轨道大小调整

最小值与最大值

使用`minmax()`函数定义轨道的尺寸范围：

.grid {
  grid-template-columns: minmax(100px, 1fr) 2fr;
}

重复轨道

`repeat()`函数简化重复轨道的定义：

.grid {
  grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
}

实际案例

响应式布局

通过`fr`单位和媒体查询实现自适应布局：

.grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

网格图表

使用Mermaid绘制轨道结构：

graph TD A[网格容器] --> B[列轨道1: 100px] A --> C[列轨道2: 1fr] A --> D[列轨道3: 2fr] A --> E[行轨道1: auto] A --> F[行轨道2: 150px]

数学关系

弹性单位`fr`的空间分配公式为： $\text{轨道宽度}=\left(\frac{\text{fr值}}{\sum \text{所有fr值}}\right)\times \text{剩余空间}$

总结

CSS网格轨道是构建网格布局的基础，通过灵活定义行与列的尺寸和分布，开发者能够高效实现复杂且响应式的页面设计。掌握显式/隐式轨道、弹性单位及函数（如`minmax`和`repeat`）是关键。