网格布局
网格容器
- 要使用网格布局必须先设置网格布局
- 使用 display:grid 或 display:inline-grid
- 默认情况下，我们开启的是一个单列的网格布局
- grid-template-columns
- 用来设置网格布局的列数
- repeat() 来重复的设置
- rapeat(4,1fr)
- rapeat(auto-fill,minmax(50px,auto))
- 第一个值：
- auto-fill 自动计算列，尽可能多的生成列
- auto-fit 自动计算列，尽量让列可以容纳下所有元素
- 例如：grid-template-columns: 100px 200px minmax(100px, auto);
- minmax(最小值,最大值)
- 用来设置行和列的大小
- 可选值：
- 像素、auto、min-content、max-content
- grid-template-rows
- grid-column-gap 列间距
- grid-row-gap 行间距
- grid-gap 同时指定行间距和列间距
- justify-items 网格项在轨道中的对齐方式
- align-items
- justify-content、align-content
- grid-template-columns: [a] 200px [b] 200px [c] 200px [d];
- grid-template-areas
- grid-auto-flow
- 设置网格项的排列方式
- 可选值：
- row 默认值，优先填充行，行满了会自动创建新行
- column 优先填充列，列满了会自动换到下一列，此时不会自动生成行
- dense 紧凑的，容器中有位置，后边的元素就会自动的补位
- grid-auto-rows
网格项
- 网格容器的子元素都会自动变为网格项
- grid-column-start 网格列的起始位置
- grid-column-end 网格列的结束位置
- grid-row-start 网格行的起始位置
- grid-row-end 网格行的结束位置
- 可以通过z-index来调整网格项的层级
- grid-column: grid-column-start/grid-column-end 同时设置列开始和结束
- grid-row: grid-row-start/grid-row-end 同时设置行开始和结束
- grid-area: grid-row-start/grid-column-start/grid-row-end/grid-column-end 同时设置行列的开始和结束
- justify-self、align-self
- grid-area: hd;