Grid网格布局-蒲公英云

简介

Flex布局时一维的布局，即水平或垂直方向的布局。而Grid布局则划分成“行”和“列”，产生单元格，可以看作是二维的布局。Grid布局远比Flex布局强大

容器

定义网格布局，定义网格布局后，容器子元素的float、display：inline-block、display：table-cell、vertical-align和column-*都将失效。

.div {
    display: grid； 
    display: inline-grid;   //容器元素可以是块元素或行内元素
}

容器属性

grid-template-columns | grid-template-rows

.container {

display: grid;
grid-template-columns: 30px 30px 30px;   //定义有多少列，且每列宽度为多少
grid-template-rows: 33.33% 33.33% 33.33%;  //定义有多少行，且每行行高为多少
//单位可以是绝对单位，也可以是百分比

}

repeat(num, value)
可以简化重复的值，避免重复写同样的值，尤其是网格比较多时， num为重复次数，value为重复的值（可以单个，如30px；或多个，如30px 20px 50px）。

.container {
```
display: grid;
grid-template-columns: repeat(3, 30px);
grid-template-rows: repeat(3,33.33%);
```
}
auto-fill关键字
有时候单元格大小固定，但容器却不固定，如希望每行容纳尽可能多的单元格，则使用auto-fill关键字表示自动填充

.container {
```
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
```
}

fr关键字
表示比例关系，fr（fraction的缩写，以为片段）

.container {

display: grid;
grid-template-columns: 1fr 2fr;   // 表示两列，第二列比第一列宽2倍
//grid-template-columns: 150px 1fr 2fr;  //可以与绝对单位结合，表示第一列占150px，然后第二、三列按比例瓜分剩余空间（如有的话）

}

minmax()
定义一个长度范围，表示最小值和最大值

.container {

display: grid;
grid-template-columns: 1fr 1fr minmax(100, 1fr); //表示列宽不小于100px，不大于1fr

}

auto关键字
定义自适应长度

.container {

display: grid;
grid-template-columns: 50px auto 100px; //第二列宽度=容器宽度-50px-100px，最小值为0

}

网格线名称
定义网格线名称，方便引用

.container {

display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] 30px [c4];
grid-template-columns: [r1] 100px [r2] 30px [r3] 40px [r4 end4];   //也可以在一个[ ]中定义两个名称，如[r4 end4]

}

grid-column-gap | grid-row-gap | grid-gap
定义列间，行间间隔大小。根据最新标准，这些属性可省略前缀grid-，即column-gap | row-gap | gap

.container {

display: grid;
grid-column-gap: 10px; //表示列间间隔10px
grid-row-gap: 10px;  //表示行间间隔10px

}

.container {

display: grid;
grid-gap: 10px 8px;  //grip-gap时grip-column-gap和grip-row-gap的合并，表示列间间隔10px，行间间隔8px

}

grid-template-areas
指定区域，一个区域可由单个或多个单元格组成
区域名会影响道网格线，会自动命令该区域起始网格线为【区域名-start】，终止网格线为【区域名-end】

.container {

display: grid;
grid-template-columns: 100px 10px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
                     'd e f'
                      g h i';  //如果某个区域不需要利用，则使用“点”  .  表示

}

grid-auto-flow
定义子元素排列顺序

row(默认值)：即“先行后列”
column: 即“先列后行”
row dense: 表示”先行后列”，并且尽可能紧密填满，尽量不出现空格
column dense: 表示”先列后行”，并且尽可能紧密填满，尽量不出现空格

justify-items | align-items | place-items
justify-items定义单元格内容水平位置，align-items定义单元格内容垂直位置
place-items是前两者的合并简写

start: 左（上）对齐
end: 右（下）对齐
center: 居中
stretch: 拉伸，占满整个单元格

justify-content | align-content | place-content
定义整个内容区域的对齐方式，justify-content定义水平方向，align-content定义垂直方向，place-content是前两者的合并简写

start: 左（上）对齐
end: 右（下）对齐
center: 居中
stretch: 拉伸，占满整个单元格
space-around：每个成员两侧（上下）间隔相等
space-between: 成员之间间隔相等，成员与容器边框没有间隔
space-evently: 成员之间，成员与容器边框之间的间隔相等

grid-auto-columns | grid-auto-rows
当成员的指定位置，在现有网格之外，浏览器就会自动生成多余网格，以放置该成员

.container {

display: grid;
grid-template-columns: 100px 10px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-rows: 30px;    //表示自动生成网格的行高
grid-auto-columns: 50px;   //表示自动生成网格的列宽

}

项目属性

grid-column-start | grid-column-end | grid-row-start | grid-row-end
定义成员的位置，指定成员的四个边框分别定位在哪根网格线
值可以为序号，也可以为网格名，也可以使用span value表示成员跨越多少个网格

grid-column-start：左边框所在的垂直网格线
grid-column-end：右边框所在的垂直网格线
grid-row-start: 上边框所在的水平网格线
grid-row-end: 下边框所在的水平网格线

grid-column | grid-row
grid-column是grid-column-start和grid-column-end的合并简写
grid-row是grid-row-start和grid-row-end的合并简写

.item{
```
grid-column: 1 / 2;
grid-row: 1 / 3;   // 也可以grid-row: 1 / span 2表示
```
}
等同于
.item{
```
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;
```
}
grid-area
指定成员放在哪个区域

.item{
```
grid-area: e;   //指定成员在e单元格
```
}
// grid-area可以用作grid-row-start,grid-ros-end,grid-column-start,grid-column-end的合并简写，直接指定成员位置+
.item {
```
grid-area: <row-start> / <row-end> / <column-start> / <column-end>;   
```
}
jusify-self | align-self | place-self
指定某个成员的对齐方式，与justify-items和align-items类似，但前者只作用于单个成员
place-self则是前两者的合并简写