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

一、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;表示每个项目之间的间隙

三、常见的项目属性

• 1、grid-column-start: 1;表示该项目所开始的位置(从最左边开始)
• 2、grid-column-end: 4;表示该项目所结束的位置
• 3、上面1和2的简写可以是grid-column: 1 / 4;
• 4、grid-row-start: 2;类似上面的列的处理一样的
• 5、grid-row-end: 4;