grid布局
前言
grid即网格，是在行（横），列（纵）的二维空间中的布局。多行和多列的交叉必然会产生单元格（items）,指定的二维空间就是container。
- what：grid布局即在二维平面内的多行多列的布局方式
- why：应对平面内多行多列的复杂布局
- how：display:grid || inline-grid
container
- grid-template-columns：每一列的列宽
- grid-template-rows：每一行的行高
注：（1）repeat()：接收两个参数，重复次数，重复值
（2）auto-fill：当作repeat函数中的第一个值，自动填充，主要用于单元格大小固定，容器大小不固定的情况
（3）fr：单元格之间的比例关系
（4）minmax（）：长度范围，在最小值与最大值之间
（5）auto：浏览器自己决定
（6）网格线名称：可以为每个单元格指定别名，如：grid-template-columns：[c1] 100px [c2] 100px [c3] auto [c4];
- grid-row-gap：行与行之间的间隔（行间距）
- grid-column-gap：列与列之间的间隔（列间距）
- grid-gap：grid-row-gap和grid-column-gap的缩写
- grid-template-areas：给容器划分区域，一个区域可能有多个单元格组成，使用时指定给每个单元格填上该区域的名称，区域名称自取。如:
- grid-auto-flow：子元素的排列顺序
- row：先行后列。row dense表示不出现空格的排列方式
- column：先列后行。column dense表示不出现空格排列方式
- justify-items：所有单元格里面的内容水平方向的对齐方式
- start
- end
- center
- stretch：拉伸对齐
- align-items：所有单元格里面的内容垂直方向对齐方式
- start
- end
- center
- stretch：拉伸对齐
- place-items：justify-items || align-items
- justify-content：所有单元格看成一个整体，在容器中的水平方向的对齐方式
- start
- end
- center
- stretch
- space-around：每个item两侧距离相等
- space-between：item之间间隔相等，item与container边框无间隔
- space-evenly：item之间间隔和item与container容器间隔间隔相等
- align-content：所有单元格看成一个整体，在容器中的垂直方向的对齐方式
- 同上
- place-content：justify-content || align-content
- grid-auto-columns：超出指定行列时，浏览器自动生成多余的网格。指定超出单元格的列宽
- 同grid-template-columns
- grid-auto-rows：超出指定行列时，浏览器自动生成多余的网格。指定超出单元格的行高
- 同grid-template-rows
- grid-template：grid-template-rows || grid-template-columns || grid-template-areas
- grid：grid-template-rows || grid-template-columns || grid-template-areas || grid-auto-rows || grid-auto-columns || grid-auto-flow
items
- grid-column-start：该子盒子左边框所对齐的垂直网格线
- 取值为数字，可用span，表示跨越，如：grid-column-start: span 2;
- grid-column-end：该盒子右边框所对齐的垂直网格线
- 同上
- grid-row-start：该子盒子上边框所对齐的水平网格线
- 同上
- grid-row-end：该子盒子下边框所对齐的水平网格线
- 同上
- grid-column：grid-column-start || grid-column-end
- grid-row：grid-row-start || grid-row-end
- grid-area：该子盒子该放在哪个区域
- 取值为区域名称
- justify-self：该子盒子内容在水平方向上的对齐方式
- start
- end
- center
- stretch
- align-self：该子盒子内容在垂直方向上的对齐方式
- 同上
- place-self：justify-self || align-self
