网格布局

弹性布局适合一维布局的场景，对于二维布局（多行多列）更适合使用网格布局

“网格布局”（Grid Layout）可以同时在 行（rows） 和 列（columns） 上对元素进行精确控制。

网格容器

.container {
  display: grid; /* 启用网格布局 */
  grid-template-columns: 100px 200px auto; /* 定义列宽 */
  grid-template-rows: 80px auto 100px;     /* 定义行高 */
  gap: 10px; /* 行列间距，可分别设置 row-gap / column-gap */
}

网格轨道（grid tracks）

grid-template-columns：列轨道

grid-template-rows：行轨道

轨道支持的单位：

类型	单位	含义	示例
固定长度	px, em, rem, %	固定或相对大小	100px, 50%
比例单位	fr	剩余空间的份额	1fr, 2fr
内容自适应	auto, min-content, max-content, fit-content()	根据内容自适应	auto, min-content
函数类单位	minmax(min, max)	在最小和最大值之间自适应	minmax(150px, 1fr)

1️⃣ 固定单位

grid-template-columns: 100px 200px 300px;

• 三列，固定宽度；
• 不会随容器变化而自适应。

2️⃣ 百分比单位

grid-template-columns: 50% 50%;

• 按容器宽度计算；
• 两列平均分。

3️⃣ fr（fraction）

grid-template-columns: 1fr 2fr 1fr;

意思是：网格宽度剩余空间按比例 1:2:1 分配。 所有固定宽度的轨道计算完后，剩余空间由 fr 轨道瓜分。

提示

可分配空间 = 容器宽度 - 所有固定宽度 - 所有 gap

gap 的宽度并不会影响 fr 的比例，只减少总空间，fr会自动按比例重新分配剩余空间。

场景：三列布局，列之间 20px 间距

使用 fr

grid-template-columns: 1fr 1fr 1fr;
gap: 20px;

不使用fr

grid-template-columns: 33.33% 33.33% 33.33%;
gap: 20px;

• 使用fr：

  • 列永远保持 严格等宽

  • 不需要你手动计算 calc((100% - gap * 2) / 3)

  • 不会出现超出或不均匀的情况

• 使用百分比（会被 gap 破坏比例）

  • 3 * 33.33% > 100%

  • 再加上 2 * 20px gap，会出现未预期的滚动条

  • 浏览器会自动收缩或换行，比例会乱

4️⃣ auto

grid-template-columns: 200px auto 100px;

• 第1列固定 200px；
• 第2列自动占用剩余内容宽度；
• 第3列固定 100px。

网格线（grid lines）

分割轨道的坐标系

• n个列轨道有n+1条垂直网格线

• m个行轨道有m+1条水平网格线