css grid-template-columns如何定义列宽

在CSS网格布局中，grid-template-columns属性用于定义网格容器中每一列的列宽，开发者可以通过多种取值方式灵活控制列的尺寸，适配不同的页面布局需求。

固定像素定义列宽

直接使用像素值可以定义固定宽度的列，这种方式适合需要固定尺寸的元素，比如侧边栏、固定宽度的卡片等。

.container {
  display: grid;
  /* 定义3列，第一列200px，第二列300px，第三列150px */
  grid-template-columns: 200px 300px 150px;
}

百分比定义列宽

百分比取值是相对于网格容器的宽度来计算列宽，适合需要响应式适配的场景，列宽会随容器宽度变化而调整。

.container {
  display: grid;
  /* 定义2列，每列占容器宽度的50% */
  grid-template-columns: 50% 50%;
}

fr单位定义列宽

fr是分数单位，用于表示剩余空间的分配比例，多个fr值会按照比例分配容器除去固定尺寸列后的剩余宽度。

.container {
  display: grid;
  /* 第一列固定200px，剩余空间按1:2分配给后两列 */
  grid-template-columns: 200px 1fr 2fr;
}

repeat函数简化定义

当需要定义多个相同或者规律的列宽时，可以使用repeat函数简化代码，减少重复书写。

.container {
  display: grid;
  /* 定义4列，每列都是1fr，等价于1fr 1fr 1fr 1fr */
  grid-template-columns: repeat(4, 1fr);
  /* 也可以定义规律的列宽，比如交替100px和1fr */
  /* grid-template-columns: repeat(2, 100px 1fr); */
}

minmax函数设置列宽范围

minmax函数可以定义列宽的最小值和最大值，让列宽在指定范围内自适应，避免列宽过小或过大影响布局。

.container {
  display: grid;
  /* 定义2列，每列最小200px，最大1fr */
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
}

auto关键字自适应列宽

auto关键字会让列宽根据内容自动调整，或者分配剩余空间，适合内容长度不固定的列。

.container {
  display: grid;
  /* 第一列自适应内容，第二列固定200px，第三列占剩余空间 */
  grid-template-columns: auto 200px 1fr;
}

常见取值组合示例

实际开发中经常会组合多种取值方式，实现更复杂的布局需求，比如常见的侧边栏加内容区的布局。

.container {
  display: grid;
  /* 侧边栏固定240px，内容区最小300px，最大占剩余空间 */
  grid-template-columns: 240px minmax(300px, 1fr);
  gap: 20px;
}

需要注意的是，当定义的列宽总和超过容器宽度时，网格容器可能会出现横向滚动条，实际使用时需要结合容器尺寸和布局需求选择合适的取值方式。

cssgrid-template-columns网格布局列宽定义修改时间：2026-06-28 14:24:23