在grid布局中如何定义网格轨道的大小？

在CSS Grid布局中，你可以使用grid-template-columns和grid-template-rows属性来定义网格轨道（即行和列）的大小。这两个属性允许你指定网格中每个轨道的尺寸。

以下是一些示例：

1. 固定尺寸：你可以为轨道指定固定的尺寸，例如像素(px)、百分比(%)、em等。

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px 150px;
  grid-template-rows: 50px 100px;
}

在这个例子中，网格有三列，宽度分别为100px、200px和150px，以及两行，高度分别为50px和100px。
2. 使用比例单位：你也可以使用比例单位（如fr），这样网格轨道的大小将根据可用空间动态调整。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 3fr;
}

在这个例子中，网格有三列，第一列和第三列各占用可用宽度的1份，第二列占用2份。同样，网格有两行，第一行占用可用高度的1份，第二行占用3份。
3. 混合使用固定尺寸和比例单位：你还可以在同一网格中混合使用固定尺寸和比例单位。

.grid-container {
  display: grid;
  grid-template-columns: 100px 1fr 200px;
  grid-template-rows: 50px 2fr 100px;
}

4. 使用auto关键字：auto关键字允许网格轨道根据其内容自动调整大小。

.grid-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 100px auto;
}

5. 使用minmax()函数：minmax()函数允许你指定网格轨道的最小和最大尺寸。这对于创建响应式布局特别有用。

.grid-container {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(150px, 2fr);
  grid-template-rows: minmax(50px, auto) 100px;
}

在这个例子中，第一列的最小宽度是100px，最大宽度是可用宽度的1份；第二列的最小宽度是150px，最大宽度是可用宽度的2份。第一行的最小高度是50px，最大高度根据内容自动调整；第二行的高度固定为100px。