网格布局的理解?
网格布局类似于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 居中或者平分