梗概
- 一种类似于表格的布局模式
- 布局容器上定义表格的形状以及单元格大小
- 被布局元素可以选择填在哪个单元格上
基本概念
1. 单元格
和excell中的单元格差不多
2. 网格线
3. 容器
使用网格布局的html标签
4. 项目(item)
容器内的html标签, 用于填入网格中
失效的属性
1. 容器被覆盖的属性
1.1. width和height属性
容器的宽度和高度将会被列宽总和和行高总和所覆盖
2. item的失效属性
设为网格布局以后,容器子元素(项目)的float
、display: inline-block
、display: table-cell
、vertical-align
和column-*
等设置都将失效。