基础
这里类似flex
- 容器 container
- 项目 item
容器属性
- display: grid 容器采用网格布局
- display: inline-grid 行内网格
- grid-template-columns 定义每一列的列宽
- repeat(count,value) count--重复的次数; value--重复的值
- auto-fill 自动填充 repeat(auto-fill,100px);
- fr关键字（fraction,"片段"） grid-template-columns: 1fr 2fr;
- minmax(min,max)产生一个长度范围
- auto 浏览器自己决定长度 grid-template-columns:100px auto 100px;
- 网格线的名称 grid-template-columns: [c1] 100px [c2] 100px [c3];
- grid-row-gap: 设置行间距
- grid-column-gap:列间距
- grid-gap: <grid-row-gap> 若只有一个值，就是第二个值等于第一个
- grid-template-areas: 指定"区域",一个区域由多个或单个单元格组成,划分区域并命名
- grid-auto-flow:row(默认),定义渲染顺序先行后列||column 先列后行
- justify-items:start | end | center | stretch(默认)设置单元格的水平位置
- align-items:start | end | center | stretch 设置单元格内容垂直位置
- place-items: <align-items> <justify-items>
- justify-content:整个内容区域的容器里面的水平位置
- align-content:整个内容区域再的垂直位置
- place-content: <align-content> <justify-content>
- grid-auto-colums 设置浏览器自动创建的多余的列高
- grid-auto-rows 设置浏览器自动创建的多余网格的行高
- grid-template: <grid-template-colums> <grid-template-rows> <grid-template-areas>
- grid : <grid-template> <grid-auto-rows> <grid-auto-columns> <grid-auto-flow>
项目属性
- grid-colum-start:左边框所在的垂直网格线
- grid-column-end: 右边框所在的垂直网格线
- grid-row-start:上边框所在的水平网格线
- grid-row-end:下边框所在的水平网格线 这几个值还可以指定网格线的名字或者使用span(跨越)关键字
- grid-column : <grid-column-start> / <grid-column-end
- grid-row: <grid-row-start> / <grid-row-end>
- gird-area: 区域名 指定项目放在哪一个区域; 也可以直接指定项目位置；grid-area:<grid-row-start> / <grid-column-start /<grid-row-end> / <grid-column-end>
- justify-self:单元格内容的水平位置
- align-self: ... 垂直位置
- place-self: <align-self> <justify-self>;
