在css中grid-template-columns如何使用-css教程-PHP中文网

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

P粉602998670

发布： 2025-10-15 14:35:01

原创

649人浏览过

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分成两列。

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

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

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如何使用的详细内容，更多请关注php中文网其它相关文章！

大家都在看：