css布局之网格布局display:grid

网格布局的理解？

   网格布局类似于flex布局都是对元素内部划分，不同之处在于flex布局是轴线布局，只能指定项目针对轴线的位置，grid布局则将容器划分成行和列，产生单元格，指定项目所在单元格。

grid网格布局

      grid-template-columns:列的宽度

      grid-template-rows:行的高度

      grid-gap:间距

      grid-column-start:1   (列的开始位置)

      grid-column-end:3  (列到那个结束)

     grid-column:1/3开始位置到结束位置合并单元格

     grid-row-start:1（行合并的开始位置）

     grid-row-end:3  (行到那个结束)

 flex弹性布局

      flex-direction决定主轴的方向

      flex-wrap 是否换行

      justify-content 居中或者平分