css栅格布局grid-template-columns使用技巧

grid-template-columns通过单位与函数实现灵活布局：1. 用px、%、fr、auto定义列宽；2. repeat()简化重复列；3. minmax()设定列宽范围；4. auto-fit与auto-fill实现动态响应式网格。

在使用 CSS Grid 布局时，grid-template-columns 是定义列结构的核心属性。它不仅决定了网格容器中每一列的宽度，还能通过灵活的单位和函数实现响应式、自适应的布局。掌握其使用技巧，能大幅提升页面排版效率。

1. 使用不同单位控制列宽

grid-template-columns 支持多种单位组合，可以根据设计需求灵活选择：

• 固定单位：如 px、em，适合固定宽度的布局（例如侧边栏）
• 百分比 %：相对于容器宽度，适合等分或比例布局
• fr 单位：代表“分数”，按剩余空间分配，是 Grid 特有的弹性单位
• auto 关键字：根据内容自动调整列宽

示例：

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

这个例子创建三列：第一列固定 200px，第二列占 1 份剩余空间，第三列占 2 份。

2. 利用 repeat() 函数简化重复列定义

当需要定义多个等宽列时，repeat() 能大幅减少代码量。

• 基本语法：repeat(数量, 宽度)
• 可结合 fr 或 % 实现均匀分布

常见用法：

/* 创建 12 列等宽网格 */
grid-template-columns: repeat(12, 1fr);

/* 交替模式：窄-宽-窄 */
grid-template-columns: repeat(3, 100px 1fr);

3. 结合 minmax() 实现响应式列宽

使用 minmax(min, max) 可为列设置最小和最大宽度，避免内容溢出或压缩过度。

Spirit Me

SpiritMe允许用户使用数字化身制作视频，这些化身可以模拟用户的声音和情感

178 查看详情

• 常用于确保列不会太窄或太宽
• 与 fr 搭配实现“弹性但有边界”的布局

示例：

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

这行代码会自动填充列数，每列最小 200px，最大为 1fr，超出则换行，非常适合卡片布局。

4. 使用 auto-fit 与 auto-fill 实现动态网格

这两个关键字配合 repeat() 和 minmax()，可创建真正响应式的网格。

• auto-fit：将空余列合并到现有列中，拉伸它们填满空间
• auto-fill：保留所有可能的列槽位，即使没有内容也保持空白

对比场景：

/* 内容少时自动拉伸填满 */
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

/* 始终保留列槽，适合预留位置 */
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

基本上就这些。合理运用 grid-template-columns 的单位和函数，可以轻松实现从简单布局到复杂响应式设计的过渡，减少媒体查询依赖，提升开发效率。关键是理解 fr、minmax 和 repeat 的协同逻辑。不复杂但容易忽略细节。

以上就是css栅格布局grid-template-columns使用技巧的详细内容，更多请关注其它相关文章！