梗概
- 一种类似于表格的布局模式
- 布局容器上定义表格的形状以及单元格大小
- 被布局元素可以选择填在哪个单元格上
基本概念
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-*等设置都将失效。
可用的属性
与Flex实现多列布局的区别
- grid布局需要在容器上预先定义好列的数量和宽度
- 而[use::flex布局]可以由内容决定列的宽度
- flex容器不用定义每列的宽度, 而是由子item的宽度来撑起列的宽度