grid布局

grid网格布局

网格布局是目前强大的css布局方案，它将网页划分成一个个网格，grid网格布局跟flex有些类似，但是flex布局是针对项目item轴线位置，相当于一维布局，而网格布局是指定项目item所在的单元格，可以看成是二维布局。

grid网格布局概念

• 区分容器container和项目item，跟flex类似
• 容器内水平区域成为行row，垂直区域称为列column，行和列交叉区域称为单元格
• 划分网格的线称为网格线，n行m列的网格布局有n+1根水平网格线，m+1垂直网格线
• 容器container属性

1. display: grid;指定容器采用网格布局，容器默为块级元素
2. display: inline-grid;指定容器采用网格布局，容器默为行内元素
3. grid-template-columns属性定义列宽，可以使用固定值，也可以使用百分百
4. grid-template-rows属性定义行高，可以使用固定值，也可以使用百分百
5. repeat()函数用于简化重复值，接受第一个参数为重复次数，第二个参数为重复模式
6. auto-fill关键字，可以作为repeat函数的第一个参数，适用于有时当容器宽度未知但是item已知为了容纳更多的item而设置的关键字。例如repeat(auto-fill, 100px)
7. fr关键字(fraction缩写意为片段)，用于grid-template-columns和grid-template-rows划分网格时前后表格的比例。fr还可以配合绝对长度单位使用
8. minmax()函数用于划分网格，表示在最大值和最小值之间随机取值grid-template-columns: 1fr 1fr minmax(100px, 1fr);
9. auto关键字，用于划分网格，浏览器自己绝对宽度和高度
10. 网格线名称，网格布局允许一根线有多个名字

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

1. 容器属性grid-row-gap属性，行与行之间的间隔

2. 容器属性grid-column-gap属性，列与列之间间隔

3. 容器属性grid-gap属性，上面两者的简写，grid-gap: row值 column值;如果只有一个值，默认row=column

4. 容器属性grid-template-areas属性用于定义区域，实际作用是合并单元格为区域，网格布局允许指定区域area，一个区域由多个单元格组成。如果某个单元格不需要利用，使用点.进行标记

5. 区域的定义会影响网格线，正常每个区域的网格线会命名为区域名-start，区域名-end

6. 容器属性grid-auto-flow属性，划分网格之后item会按照顺序放入网格，默认是先填满第一行然后第二行，其实就是由中国属性控制，这个属性默认值为row，可以改成column就会先填满第一列然后第二列

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: "header header header"
                       "main main sidebar"
                       "footer footer footer";
}

1. justify-items属性，设置整个单元格内容水平位置(左中右)

2. align-items属性，设置整个单元格垂直位置(上中下)

3. place-items属性，上面两个属性的简写，place-items: <align-items> <justify-items>;

4. justify-content属性，整个容器内部整体水平位置(左中右)

5. align-content属性，整个容器内部整体垂直位置(上中下)

6. place-content属性，上面两个属性的简写，place-content: <align-content> <justify-content>

7. grid-auto-rows属性，有时一些项目并不在现有的网格内部，而在网格外部，这个属性可以设置外部网格的行高

8. grid-auto-column属性，有时一些项目并不在现有的网格内部，而在网格外部，这个属性可以设置外部网格的列宽

9. grid-template属性是grid-template-columns、grid-template-rows、grid-template-areas简写

10. grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow简写

项目item属性

用于指定项目item的位置，以下属性指定项目网格线位置

• grid-column-start属性
• grid-column-end属性
• grid-column上面两个属性简写
• grid-row-start属性
• grid-row-end属性
• grid-row上面两个属性简写
• span关键字表示跨越多少个网格
• grid-area属性指定item在哪个区域
• grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的简写
• justify-self属性，设置单元格内容水平位置(左中右)
• align-self属性，设置单元格内容垂直位置(上中下)

grid布局实例

grid-template-columns对于常见的两列布局很有用

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}

/* 栅格化系统的12列布局也很简单 */
.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}