什么是自适应网格布局？深入理解CSS grid-template-columns 属性

2026-03-18 yvsm 前端开发

一、什么是grid-template-columns？

grid-template-columns 是CSS Grid布局中最核心的属性之一，用于定义网格容器的列数和每列的宽度。    Grid布局将容器划分为行和列的二维网格，而该属性专门控制列的维度，配合 grid-template-rows（控制行）可以灵活构建各种复杂的布局结构。

二、基本语法

语法格式：grid-template-columns: [值1] [值2] [值3] ...;

每个值代表一列的宽度，多个值之间用空格分隔，有多少个值就会生成多少列。

三、常用取值方式

1. 固定长度值（px、em、rem等）

直接指定每列的固定宽度，适用于列宽固定的场景，缺点是无法自适应容器宽度。

示例代码：grid-template-columns: 100px 200px 150px;

/* 容器样式 */
.grid-container {
    display: grid;
    grid-template-columns: 100px 200px 150px;
    gap: 10px; /* 网格项间距 */
}
/* 网格项样式 */
.grid-item {
    background-color: #3498db;
    color: white;
    padding: 1.5rem;
    text-align: center;
}

效果：生成3列固定宽度的网格，列宽分别为100px、200px、150px，不会随容器宽度变化。

2. 比例值（fr）

fr 是Grid布局的专属单位，表示“剩余空间的比例”，会根据容器宽度自动分配空间，是最常用的自适应取值方式。

示例代码：grid-template-columns: 1fr 2fr 1fr;（总比例4份，列2占2份，列1、3各占1份）

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 10px;
}

效果：3列网格按1:2:1的比例分配容器宽度，容器宽度变化时，列宽也会按比例自适应。

3. repeat() 函数

当多列宽度相同时，使用 repeat(重复次数, 宽度值) 简化代码，提升可读性。

示例代码：grid-template-columns: repeat(3, 1fr);（等价于 1fr 1fr 1fr）

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

效果：生成3列等宽的自适应网格，代码比直接写3个1fr更简洁。

4. minmax() 函数

minmax(最小值, 最大值) 定义列宽的范围，列宽会在最小值和最大值之间自适应，常用搭配 fr 使用。

示例代码：grid-template-columns: minmax(100px, 1fr) 2fr auto;

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

效果：

  • 列1：最小宽度100px，最大宽度为1fr（剩余空间的1份）；

  • 列2：占剩余空间的2份；

  • 列3：宽度由内容自动决定。

5. 其他特殊值

  • auto：列宽由内容或容器自动决定，会自适应填充剩余空间；

  • %：按容器宽度的百分比设置列宽，例如 grid-template-columns: 20% 50% 30%;。

四、使用注意事项

  1. 使用 grid-template-columns 前，必须先给容器设置 display: grid; 或 display: inline-grid;，否则属性无效；

  2. 当列宽总和超过容器宽度时，网格会溢出，可配合 grid-auto-flow: dense 或 overflow 属性处理；

  3. fr 单位会优先分配“非固定宽度”的剩余空间，混合使用固定值和fr时，固定值会先占用空间，剩余部分再按fr比例分配。

标签：