CSS Grid 容器属性

上一篇建立了网格的基本概念，这篇学容器上的属性。容器属性写在网格容器（display: grid 的元素）上，负责轨道怎么分、间距多大、装不下的项目怎么办。

固定尺寸的轨道

grid-template-columns 定义列轨道，grid-template-rows 定义行轨道，写法都是按顺序列出每个轨道的尺寸，空格分隔。

.grid {
  display: grid;
  grid-template-columns: 200px 200px 200px;  /* 3 列，每列固定 200px */
  grid-template-rows: 100px 100px;           /* 2 行，每行固定 100px */
}

单位用 px 最直观，写多少就是多少。也可以用百分比，基准是容器自身宽度，比如三列各 33.33% 就基本均分。

fr 分数单位

定死宽度的列在响应式页面里不好使，容器变窄它也不变。fr 单位解决这个问题，fr 是 fraction 的缩写，意思是把剩余空间按比例分配。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;  /* 剩余空间分 4 份，第三列拿 2 份 */
}

1fr 1fr 2fr 相当于把剩余宽度分成 4 份，前两列各 1 份，第三列 2 份。注意 fr 和百分比的区别，百分比按容器总宽计算，而 fr 先扣掉固定轨道和 gap 的尺寸，再把剩下的空间分出去。容器里有固定列或间距时，两者的结果就不一样。

repeat 函数和 gap 间距

重复的轨道写法啰嗦，repeat(3, 1fr) 等价于 1fr 1fr 1fr。经典思路是 12 等分，即 repeat(12, 1fr)，配合项目属性里的跨列写法，任何常见栅格比例都能拼出来，很多 CSS 框架的栅格系统就是这个原理。

格子之间要留空隙，用 gap 一个属性搞定，同时设置行和列的间距。gap: 20px 表示行列都是 20px，gap: 20px 10px 表示行 20px 列 10px。拆开写分别是 row-gap 和 column-gap。老写法 grid-gap 已经废弃，别再用了。

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);  /* 12 等分 */
  gap: 20px 10px;                          /* 行距 20px，列距 10px */
}

隐式轨道

项目数量超过格子数时，Grid 会自动新开行来装，这种自动生成的轨道叫隐式轨道。隐式行的高度默认由内容决定，想让所有自动行统一高度，用 grid-auto-rows。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 只定义了列 */
  grid-auto-rows: 100px;                  /* 自动生成的行高固定 100px */
  gap: 10px;
}

12 栅格雏形

把前面的内容串起来，做一个简单的 12 栅格，一半宽的块和三分之一宽的块混排。跨列用的 grid-column: span 6 属于项目属性，细节下一篇讲，这里先体验效果。

<div class="grid">
  <div class="half">占 6 列</div>
  <div class="half">占 6 列</div>
  <div class="third">占 4 列</div>
  <div class="third">占 4 列</div>
  <div class="third">占 4 列</div>
</div>

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
  }
  .half { grid-column: span 6; }   /* 跨 6 列 */
  .third { grid-column: span 4; }  /* 跨 4 列 */
</style>

第一行两个半宽块占满，第二行三个三分之一块占满，正好凑齐 12 份。

容器属性小结，grid-template-columns 和 grid-template-rows 定轨道，fr 管比例分配，repeat 管简化，gap 管间距，grid-auto-rows 管隐式轨道。下一篇讲项目怎么占位。