grid：网格、栅格
row：行
column：列
template：模板
justify：调整
content：内容
item：项目
container：容器
self：自己
feature：片段
area：区域、地区
grid布局系统术语
grid container：网格容器
grid item ：网格项目
grid line：网格线
grid属性
-
display: grid;定义网格容器 -
grid-template定义显式网格(网格列、网格行、网格区域) -
grid-template-columns定义显式网格(列数和列宽) -
grid-template-rows定义显式网格行(行数和行高) -
grid-template-areas定义显式网格区域 -
grid-auto-rows定义隐式网格的行高 -
grid-auto-columns定义隐式网格的列宽 -
justify-content定义网格沿行轴的对齐方式 -
align-content定义网格沿列轴的对齐方式 -
align-items定义网格单元沿列轴的对齐方式 -
justify-items定义网格单元沿行轴的对齐方式 -
align-self覆盖align-items的值 (子元素) -
justify-self覆盖justify-items的值 (子元素) -
column-gap定义列间距 -
row-gap定义行间距 -
gap简写属性：定义网格间距 -
grid-column-start定义跨列起始线 (子元素) -
grid-column-end定义跨列结束线 (子元素) -
grid-column跨列复合属性 (子元素) -
grid-row-start定义跨行起始线 (子元素) -
grid-row-end定义跨行结束线 (子元素) -
grid-row跨行复合属性 (子元素) -
grid-area定义网格区域。可以通过网格线设置网格区域，也可以通过自定义名称,是grid-column和grid-row的简写属性 (子元素)
grid-template-columns网格列
确定父元素和子元素？
1创建网格系统
2创建模板
3设置子元素名称
4指定列宽和行高
