定义列和行
使用 grid-template-columns/rows 定义网格的列和行
.grid {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-template-rows: 80px 120px;
}
display: grid;
grid-template-columns: 100px 200px 100px;
grid-template-rows: 80px 120px;
}
1. 固定尺寸（Fixed Size）
语法：
使用固定的像素值定义每列的宽度
grid-template-columns: 100px 200px 100px;使用固定的像素值定义每列的宽度
100px
200px
100px
4
5
6
2. 弹性单位 fr（Flexible Unit）
语法：
grid-template-columns: 100px 1fr;1fr 表示占据剩余空间的 1 份，会自动伸缩
100px 固定
1fr 自动填充剩余空间
100px
1fr
3. minmax() 函数
语法：
定义最小值和最大值，列宽在这个范围内自适应
grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr);定义最小值和最大值，列宽在这个范围内自适应
minmax(100px, 1fr)
minmax(200px, 2fr)
最小 100px
最小 200px，最大 2 倍空间
4. fit-content() 函数
语法：
根据内容自适应，但不超过指定的最大值
grid-template-columns: fit-content(200px) 1fr fit-content(150px);根据内容自适应，但不超过指定的最大值
fit-content(200px)
1fr 填充
fit-content(150px)
5. repeat() 函数
语法：
重复创建相同尺寸的列，等同于
grid-template-columns: repeat(3, 200px);重复创建相同尺寸的列，等同于
200px 200px 200px
200px
200px
200px
4
5
6
6. auto-fill 自动填充
语法：
自动填充尽可能多的列，适合响应式布局
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;自动填充尽可能多的列，适合响应式布局
200px 固定
auto-fill 100px
auto-fill 100px
300px 固定
7. 混合使用（Mixed）
语法：
可以混合使用固定值和弹性单位，
grid-template-columns: 100px 1fr 2fr 100px;可以混合使用固定值和弹性单位，
2fr 是 1fr 的两倍宽度
100px
1fr
2fr (两倍)
100px
常用语法总结：
/* 固定尺寸 */
grid-template-columns: 100px 200px 100px;
/* 弹性单位 fr */
grid-template-columns: 100px 1fr;
grid-template-columns: 1fr 2fr 1fr;
/* minmax() 函数 */
grid-template-columns: minmax(100px, 1fr);
/* fit-content() 函数 */
grid-template-columns: fit-content(40%);
/* repeat() 函数 */
grid-template-columns: repeat(3, 200px);
grid-template-columns: repeat(3, 1fr);
/* auto-fill / auto-fit */
grid-template-columns: repeat(auto-fill, 100px);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* 命名网格线 */
grid-template-columns: [line-name] 100px [line-name2];
/* 混合使用 */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns: 100px 1fr 2fr 100px;
/* 固定尺寸 */
grid-template-columns: 100px 200px 100px;
/* 弹性单位 fr */
grid-template-columns: 100px 1fr;
grid-template-columns: 1fr 2fr 1fr;
/* minmax() 函数 */
grid-template-columns: minmax(100px, 1fr);
/* fit-content() 函数 */
grid-template-columns: fit-content(40%);
/* repeat() 函数 */
grid-template-columns: repeat(3, 200px);
grid-template-columns: repeat(3, 1fr);
/* auto-fill / auto-fit */
grid-template-columns: repeat(auto-fill, 100px);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* 命名网格线 */
grid-template-columns: [line-name] 100px [line-name2];
/* 混合使用 */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns: 100px 1fr 2fr 100px;