grid布局属性总结

Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

容器的属性

属性 llllllllllllllIIIIIIIIIIIIIIIIIIIIIIII	描述
display属性	指定容器采用grid布局
grid-template-columns	指定每一列的列宽 属性值详解
grid-template-rows	指定每一行的行高
grid-template-areas	定义区域属性详解
grid-template	grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简
grid-column-gap	列间距；单位px，em等
grid-row-gap	行间距
grid-gap	grid-column-gap、grid-row-gap缩写
grid-auto-flow	指定排序规则
justify-items	设置单元格内容的水平位置（左中右）
align-items	设置单元格内容的垂直位置（上中下）
place-items	align-items属性和justify-items属性的合并简写形式
justify-content	整个内容区域在容器里面的水平位置（左中右）
align-content	整个内容区域的垂直位置（上中下）
place-content	align-content属性和justify-content属性的合并简写形式
grid-auto-columns	多余网格的列宽
grid-auto-rows	多余网格的行高
grid	grid-template-columns、grid-template-rows、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写

项目的属性

属性 llllllllllllllIIIIIIIIIIIIIIIIIIIIIIII	描述
grid-column-start	左边框所在的垂直网格线
grid-column-end	右边框所在的垂直网格线
grid-column	grid-column-start和grid-column-end的合并简写
grid-row-start	上边框所在的水平网格线
grid-row-end	下边框所在的水平网格线
grid-row	grid-row-start属性和grid-row-end的合并简写
grid-area	指定项目放在哪一个区域，还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写
justify-self	设置单元格内容的水平位置（左中右）
align-self	设置单元格内容的垂直位置（上中下）
place-self	align-self属性和justify-self属性的合并简写

---

属性详解

单位解释：

grid-template-columns、
grid-template-rows
值：
px、em等单位，可以是百分比;
repeat()函数，repeat函数接收两个参数，第一个是要重复的次数(可以是auto-fill)，第二个参数是要重复的值;
fr(片段)，把容器分成片段;
minmax()函数，最小值最大值；
auto关键字，表示由浏览器自己决定长度
网格线名称，使用方括号，指定每一根网格线的名字

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

上面代码指定网格布局为3行 x 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。

grid-template-columns属性解释