这个词确实看起来复杂,但其实很好理解。让我来拆解一下:
单词分解
grid-template-columns
=
-
grid - 网格
-
template - 模板
-
columns - 列
连起来就是:网格模板列 → 定义网格的列模板
为什么要用这么长的单词?
-
语义明确:长单词能准确表达功能
-
可读性好:一看就知道是控制网格列的
-
一致性:CSS Grid 有一套完整的命名体系
类似的Grid属性
属性 | 意思 | 功能 |
---|---|---|
grid-template-rows |
网格模板行 | 定义行 |
grid-template-areas |
网格模板区域 | 定义命名区域 |
grid-column-gap |
网格列间隙 | 列之间的间距 |
grid-row-gap |
网格行间隙 | 行之间的间距 |
更简单的理解方式
您可以把 grid-template-columns
理解为:
"请按照这个模板来创建网格的列"
实际例子
/* 创建3列:200px 自动 200px */
grid-template-columns: 200px auto 200px;
/* 创建4个等宽列 */
grid-template-columns: 1fr 1fr 1fr 1fr;
/* 创建7个等宽列(日历常用) */
grid-template-columns: repeat(7, 1fr);
/* 创建响应式列:最小100px,最大1fr */
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
为什么不用更短的单词?
CSS工作组选择长名称是为了:
-
避免命名冲突:短名称容易重复
-
自我描述:一看就知道功能
-
一致性 :所有Grid属性都有
grid-
前缀
对比其他布局
布局方式 | 属性 | 长度 | 可读性 |
---|---|---|---|
Flexbox | flex-direction |
中等 | 👍 |
Grid | grid-template-columns |
长 | 👍👍 |
传统 | float: left |
短 | 👎 |
虽然单词长,但一旦理解了它的含义,就会发现它非常直观和强大!