css3中网格布局与弹性盒子布局对比

1、display:grid定义一个容器属性为网格布局

2、grid-template-columns: 100px 100px 100px表示创建三列,每列的宽度是100px

3、grid-template-columns: repeat(3, 1fr)表示创建三列,每列平均分配

4、grid-template-columns: 150px 100px 50px 1fr;表示创建四列,最后一列占全部剩余的位置

5、grid-template-rows: 50px 50px表示创建两行,每行的高度是50px

6、行其他的也可以跟列一样的

7、grid-gap: 1px;表示每个项目之间的间隙