营销式网站,网络营销方案总结,装饰工程施工组织设计,wordpress vip解析插件这个词确实看起来复杂#xff0c;但其实很好理解。让我来拆解一下#xff1a;单词分解grid-template-columns grid - 网格template - 模板columns - 列连起来就是#xff1a;网格模板列 → 定义网格的列模板为什么要用这么长的单词#xff1f;语义明确#xff1a;长单词能…这个词确实看起来复杂但其实很好理解。让我来拆解一下单词分解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-前缀对比其他布局布局方式属性长度可读性Flexboxflex-direction中等Gridgrid-template-columns长传统float: left短虽然单词长但一旦理解了它的含义就会发现它非常直观和强大
