grid布局学习
作者：互联网
虽然不经常用还是抽个空学一下 卷！
与flex不同之处 grid为二维布局
1. 布局: display: grid;
2. 网格间距: grid-gap: 10px; 行列通用间距 // 写法类似 padding margin
grid-row-gap: 10px; 行间距；
grid-column-gap: 10px; 列间距；
3. 网格线
使用 grid-row-start / gird-column-start 决定起始线
使用 grid-row-end / grid-column-end 决定结束线
4. 行数/列数
grid-template-columns: auto auto auto; 有几个数值就有几列 全是auto时类似 flex: 1;
grid-template-rows: 80px 100px; 具体数值可以决定 宽度 / 高度
5. 水平对齐方式 justify-content: center 基本和flex相同 多了个 space-evenly 会在列之间以及列周围留出相等的空间
6. 垂直对齐方式 align-items: center 基本和flex相同 多了个 space-evenly 会在行之间以及行周围留出相等的空间 属性值与 justify-content 相同
7. grid-column 网格线的缩写模式 grid-column: 2 / 3 => grid-column-start: 2; grid-column-start: 3;
grid-row 网格线的缩写模式 grid-row: 2 / 3 => grid-row-start: 2; grid-row-start: 3;
跨越： grid-column: 2 / span 2; => grid-column-start: 2; grid-column-start: 4; 即 从column 2 开始, 跨越两列
8. grid-area 将 grid-column grid-row 合并的写法
grid-area: 1 / 2 / 5 / 6; => grid-row: 1 / 5; grid-column: 2 / 6;
跨越: grid-area: 1 / 2 / span 2 / span 3; => grid-row: 1 / span 2; grid-column: 2 / span 3;
9.网格命名项 稍后再学...
标签：flex,span,column,布局,学习,start,grid,row 来源： https://www.cnblogs.com/shirunfeng/p/16536137.html