概述
Grid布局针对二维布局
基本概念
- 最外层的是容器， 内层的是项目, 项目只能是容器的顶层子元素, 不包含项目的子元素
- 行row 列column 交叉区域为单元格cell 划分网格的线 网格线 n行就是n+1根水平线 m列就是m+1垂直网格线
容器属性
- display: grid/inline-grid
- grid-template-columns: 100px 100px 100px 列宽
- grid-template-rows: repeat(3,33.33%) 行高(auto-fill) (fr关键字）（minmax长度范围）（auto)
- grid-row-gap 行与行的间隔 grid-colum-gap 列与列的间隔
- grid-template-areas: ’a b c’ ’d e f’ ’g h i’; 九个区域 某些区域不需要利用 . 表示
- grid-auto-flow: colum先列后行
- justify-items：start/end/center/stretch 单元格内容的水平位置
- align-items:start/end/center/stretch 单元格内容的垂直位置
- justify-content: start/end/center/stretch/space-around/space-between/space-evenly 整体内容区域在容器里面的水平位置
- align-content: 整体内容区域处置位置
- space-content: 上两个简写
- grid-auto-columns: 浏览器自动创建的多余网格的列宽和行高
- grid-auto-rows:
- grid-template-columns/rows: 和上面一样
项目属性
- grid-column-start：2左边框所在的垂直网格线
- grid-column-end: 右边框所在的垂直网格线
- grid-row-start：上边框所在的水平网格线
- grid-row-end: 下边框所在的水平网格线
- 还可以使用span代表跨越
- grid-column是合并简写形式
- grid-area
- justify-self：start/end/center/stretch 属性设置单元格内容的水平位置
- align-self 设置单元格内容的垂直位置
- place-self 合并简写
