Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。
容器的属性
属性 llllllllllllllIIIIIIIIIIIIIIIIIIIIIIII | 描述 |
---|---|
display属性 | 指定容器采用grid布局 |
grid-template-columns | 指定每一列的列宽 属性值详解 |
grid-template-rows | 指定每一行的行高 |
grid-template-areas | 定义区域属性详解 |
grid-template | grid-template-columns 、grid-template-rows 和grid-template-areas 这三个属性的合并简 |
grid-column-gap | 列间距;单位px,em等 |
grid-row-gap | 行间距 |
grid-gap | grid-column-gap 、grid-row-gap 缩写 |
grid-auto-flow | 指定排序规则 |
justify-items | 设置单元格内容的水平位置(左中右) |
align-items | 设置单元格内容的垂直位置(上中下) |
place-items | align-items 属性和justify-items 属性的合并简写形式 |
justify-content | 整个内容区域在容器里面的水平位置(左中右) |
align-content | 整个内容区域的垂直位置(上中下) |
place-content | align-content 属性和justify-content 属性的合并简写形式 |
grid-auto-columns | 多余网格的列宽 |
grid-auto-rows | 多余网格的行高 |
grid | grid-template-columns 、grid-template-rows 、grid-template-areas 、 grid-auto-rows 、grid-auto-columns 、grid-auto-flow 这六个属性的合并简写 |
项目的属性
属性 llllllllllllllIIIIIIIIIIIIIIIIIIIIIIII | 描述 |
---|---|
grid-column-start | 左边框所在的垂直网格线 |
grid-column-end | 右边框所在的垂直网格线 |
grid-column | grid-column-start 和grid-column-end 的合并简写 |
grid-row-start | 上边框所在的水平网格线 |
grid-row-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 | 设置单元格内容的垂直位置(上中下) |
place-self | align-self 属性和justify-self 属性的合并简写 |
属性详解
单位解释:
grid-template-columns
、grid-template-rows
值:
px、em等单位,可以是百分比;
repeat()函数,repeat函数接收两个参数,第一个是要重复的次数(可以是auto-fill),第二个参数是要重复的值;
fr(片段),把容器分成片段;
minmax()函数,最小值最大值;
auto关键字,表示由浏览器自己决定长度
网格线名称,使用方括号,指定每一根网格线的名字
.container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
上面代码指定网格布局为3行 x 3列,因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。
grid-template-columns属性解释