CSSGrid布局：grid-template-columns详解

在 CSS Grid 布局中，`grid-template-columns` 是一个至关重要的属性，它定义了网格容器的列结构，直接影响网页的布局。该属性允许开发者灵活地控制列的数量、大小和轨道宽度，实现响应式设计。`grid-template-columns` 支持多种取值方式，包括固定长度（如 `200px`）、百分比、`fr` 单位（按比例分配剩余空间）、`auto`（自动调整列宽）、`min-content`/`max-content`（基于内容调整）以及 `repeat()` 函数（简化重复列的写法）。通过结合 `fr` 单位按比例分配空间，以及利用 `repeat()` 函数和 `minmax()` 函数，可以轻松创建自适应的网格布局，例如 `repeat(auto-fit, minmax(150px, 1fr))`，实现列数和宽度的自动调整，从而适应不同屏幕尺寸。

grid-template-columns 定义网格列结构，支持固定值、百分比、fr 单位、auto、min-content、max-content 及 repeat() 函数；fr 按比例分配剩余空间，repeat() 简化重复列，结合 minmax() 实现响应式布局，如 repeat(auto-fit, minmax(150px, 1fr)) 自动调整列数与宽度。

CSS 的 grid-template-columns 属性用于定义网格容器中列的数量、大小和轨道宽度。它是 CSS Grid 布局中最核心的属性之一，直接决定网格的列结构。

基本语法与取值

grid-template-columns 接受一个用空格分隔的值列表，每个值对应一列的宽度。

• 固定长度：如 100px、2em、5rem
• 百分比：如 50%、25%，相对于网格容器的宽度
• fr 单位：表示“分数（fraction）”，按剩余空间的比例分配
• auto：根据内容自动调整列宽
• min-content / max-content：基于内容最小或最大所需空间
• repeat() 函数：简化重复列的写法

示例：

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

这行代码创建了三列：第一列 100px 宽，第二列 200px 宽，第三列占据剩余空间。

使用 fr 单位灵活布局

fr 是 Grid 中非常实用的单位，用于按比例分配可用空间。

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

容器被分为三等份，第一列占 1 份，第二列占 2 份，实现 1:2 的宽度比例。

混合使用时，固定值先被扣除，剩余空间再按 fr 分配。

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

100px 被固定占用后，其余空间按 1:2 分给后两列。

repeat() 函数简化写法

当有多列相同宽度时，repeat() 可避免重复书写。

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

等同于 1fr 1fr 1fr，创建三个等宽列。

支持嵌套和混合：

grid-template-columns: repeat(2, 100px 1fr) auto;

生成：100px、1fr、100px、1fr、auto 共五列。

还可以使用 auto-fill 和 auto-fit 实现响应式布局：

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

容器会尽可能多地填充最小 200px 的列，每列至少 200px，多余空间平均分配。

结合 minmax() 设置弹性列宽

minmax() 函数允许为列设置最小和最大宽度范围。

.container {
  grid-template-columns: minmax(100px, 200px) 1fr;
}

第一列最小 100px，最大 200px，超出部分由第二列（1fr）吸收。

常用于响应式设计，配合 repeat() 使用更强大：

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

自动适配列数，每列最小 150px，最大为 1fr，屏幕变窄时自动换行。

基本上就这些。掌握 grid-template-columns 的各种写法，能快速构建灵活、响应式的网格布局。关键是理解 fr、repeat、minmax 的组合逻辑，实际开发中非常高效。不复杂但容易忽略细节。

今天关于《CSSGrid布局：grid-template-columns详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于响应式布局,grid-template-columns,CSSGrid,fr单位,repeat()函数的内容请关注golang学习网公众号！