在css中grid-template-columns如何使用_技术学堂

在css中grid-template-columns如何使用

发布时间：2025-10-15 14:35

发布者：网络

浏览次数：

grid-template-columns用于定义网格列的宽度和比例，支持像素、百分比、fr单位及repeat()函数，可实现固定、弹性与自适应布局，是构建灵活CSS Grid布局的核心属性。

在css中grid-template-columns如何使用

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

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

grid-template-columns: 100px 200px 150px;

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

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

grid-template-columns: 1fr 2fr;

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

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

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

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

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

察言观数AskTable

企业级AI数据表格智能体平台

78 查看详情察言观数AskTable

grid-template-columns: repeat(3, 1fr);

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

也可以组合使用：

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

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

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

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

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

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

以上就是在css中grid-template-columns如何使用的详细内容，更多请关注其它相关文章！