什么是自适应网格布局？深入理解CSS grid-template-columns 属性
一、什么是grid-template-columns？
grid-template-columns 是CSS Grid布局中最核心的属性之一，用于定义网格容器的列数和每列的宽度。
Grid布局将容器划分为行和列的二维网格，而该属性专门控制列的维度，配合 grid-template-rows（控制行）可以灵活构建各种复杂的布局结构。
二、基本语法
语法格式：grid-template-columns: [值1] [值2] [值3] ...;
每个值代表一列的宽度，多个值之间用空格分隔，有多少个值就会生成多少列。
三、常用取值方式
1. 固定长度值（px、em、rem等）
直接指定每列的固定宽度，适用于列宽固定的场景，缺点是无法自适应容器宽度。
示例代码：grid-template-columns: 100px 200px 150px;
/* 容器样式 */
.grid-container {
display: grid;
grid-template-columns: 100px 200px 150px;
gap: 10px; /* 网格项间距 */
}
/* 网格项样式 */
.grid-item {
background-color: #3498db;
color: white;
padding: 1.5rem;
text-align: center;
}效果：生成3列固定宽度的网格，列宽分别为100px、200px、150px，不会随容器宽度变化。
2. 比例值（fr）
fr 是Grid布局的专属单位，表示“剩余空间的比例”，会根据容器宽度自动分配空间，是最常用的自适应取值方式。
示例代码：grid-template-columns: 1fr 2fr 1fr;（总比例4份，列2占2份，列1、3各占1份）
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 10px;
}效果：3列网格按1:2:1的比例分配容器宽度，容器宽度变化时，列宽也会按比例自适应。
3. repeat() 函数
当多列宽度相同时，使用 repeat(重复次数, 宽度值) 简化代码，提升可读性。
示例代码：grid-template-columns: repeat(3, 1fr);（等价于 1fr 1fr 1fr）
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}效果：生成3列等宽的自适应网格，代码比直接写3个1fr更简洁。
4. minmax() 函数
minmax(最小值, 最大值) 定义列宽的范围，列宽会在最小值和最大值之间自适应，常用搭配 fr 使用。
示例代码：grid-template-columns: minmax(100px, 1fr) 2fr auto;
.grid-container {
display: grid;
grid-template-columns: minmax(100px, 1fr) 2fr auto;
gap: 10px;
}效果：
列1：最小宽度100px，最大宽度为1fr（剩余空间的1份）；
列2：占剩余空间的2份；
列3：宽度由内容自动决定。
5. 其他特殊值
auto：列宽由内容或容器自动决定，会自适应填充剩余空间；%：按容器宽度的百分比设置列宽，例如grid-template-columns: 20% 50% 30%;。
四、使用注意事项
使用
grid-template-columns前，必须先给容器设置display: grid;或display: inline-grid;，否则属性无效；当列宽总和超过容器宽度时，网格会溢出，可配合
grid-auto-flow: dense或overflow属性处理；fr单位会优先分配“非固定宽度”的剩余空间，混合使用固定值和fr时，固定值会先占用空间，剩余部分再按fr比例分配。
