CSS中grid-template-columns用法详解

grid-template-columns 是 CSS Grid 布局中掌控列结构的核心属性，它通过灵活支持像素、百分比、fr 单位以及 repeat()、minmax() 等高级语法，让你轻松实现固定宽度、等比分配、混合比例、自动重复乃至响应式自适应网格——无论是一行三列的卡片布局，还是动态填充的仪表盘面板，只需一行代码就能精准定义列的数量、尺寸与弹性行为，是现代网页布局不可或缺的高效利器。

在CSS中，grid-template-columns 用于定义网格容器中列的数量、宽度和比例。它是CSS Grid布局的核心属性之一，帮助你灵活地控制网格的列结构。

基本语法

使用 grid-template-columns 时，你可以指定每个列的宽度，用空格分隔每个值。例如：

这表示创建三列，宽度分别为100px、200px和150px。

使用fr单位分配剩余空间

fr（fraction）单位表示可用空间的一部分。它非常适合创建响应式布局。

这会将容器分为两列：第一列占1份，第二列占2份，总共3份。第二列是第一列宽度的两倍。

结合不同单位混合使用

你可以混合使用像素、百分比、fr等单位来更精细地控制布局。

第一列固定为100px，剩余空间按1:2分成两列。

重复值的简写：repeat()

当有多列相同宽度时，可以用 repeat() 函数简化代码。

创建三列，每列均分可用空间。

也可以组合使用：

相当于：100px 1fr 100px 1fr。

使用auto-fill和auto-fit

配合 minmax() 可实现自适应网格：

浏览器会尽可能多地填入最小100px、最大1fr的列，超出则换行。

基本上就这些，掌握 grid-template-columns 能让你快速构建灵活的网格布局，适合从简单表单到复杂仪表盘的各种场景。不复杂但容易忽略细节，多试几次就能熟练。

本篇关于《CSS中grid-template-columns用法详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！