grid-template-columns用于定义网格列的宽度和比例，支持像素、百分比、fr单位及repeat()函数，可实现固定、弹性与自适应布局，是构建灵活CSS Grid布局的核心属性。
在CSS中，grid-template-columns 用于定义网格容器中列的数量、宽度和比例。它是CSS Grid布局的核心属性之一，帮助你灵活地控制网格的列结构。
基本语法
使用 grid-template-columns 时，你可以指定每个列的宽度，用空格分隔每个值。例如：
grid-template-columns: 100px 200px 150px;这表示创建三列，宽度分别为100px、200px和150px。
使用fr单位分配剩余空间
fr（fraction）单位表示可用空间的一部分。它非常适合创建响应式布局。
立即学习“前端免费学习笔记（深入）”；
grid-template-columns: 1fr 2fr;这会将容器分为两列：第一列占1份，第二列占2份，总共3份。第二列是第一列宽度的两倍。
结合不同单位混合使用
你可以混合使用像素、百分比、fr等单位来更精细地控制布局。
grid-template-columns: 100px 1fr 2fr;第一列固定为100px，剩余空间按1:2分成两列。
重复值的简写：repeat()
当有多列相同宽度时，可以用 repeat() 函数简化代码。
grid-template-columns: repeat(3, 1fr);创建三列，每列均分可用空间。
也可以组合使用：
grid-template-columns: repeat(2, 100px 1fr);相当于：100px 1fr 100px 1fr。
使用auto-fill和auto-fit
配合 minmax() 可实现自适应网格：
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));浏览器会尽可能多地填入最小100px、最大1fr的列，超出则换行。
基本上就这些，掌握 grid-template-columns 能让你快速构建灵活的网格布局，适合从简单表单到复杂仪表盘的各种场景。不复杂但容易忽略细节，多试几次就能熟练。
