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%;  //定义有多少行，且每行行高为多少
	//单位可以是绝对单位，也可以是百分比
}

1. 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%);
}

2. auto-fill关键字
   有时候单元格大小固定，但容器却不固定，如希望每行容纳尽可能多的单元格，则使用auto-fill关键字表示自动填充

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

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

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

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

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

5. auto关键字
   定义自适应长度

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

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

.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则是前两者的合并简写

参考

阮一峰大神：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html