笔记 grid 布局全解

声明

本笔记大部分内容归纳来源于阮一峰老师的 grid布局教程 。

概念

网格布局类似表格，但是比表格有更高的可控性。网格布局只关系父子级元素，和弹性布局类似，以下术语参照个人理解。

术语：
容器：标识网格布局的根容器。
项目：是被容器包裹的第一层元素。
行列：被网格线分隔成的逐行逐列。（类似表格的行列）
单元格：被网格线分隔的最小单位。（类似表格的单元格）
网格线：水平或垂直，用来分隔网格的线。这个线不决定项目的宽高，只决定项目所在的单元格，网格线不可见，可以通过调试工具查看，如下：

黑线：容器的border；
灰线：项目的border；
虚线：网格线，通过调试工具看到；

容器属性

定义

1. display:grid;
   标识元素为块级网格容器，其子级自动变为项目，不需要格外定义。
2. display:inline-grid;
   同上，但是此时容器是行级块元素。（可设置宽高）

设置行列高宽

1. grid-template-columns
   设置列宽。
   可设置为：auto，百分比，像素，fr（fraction 片段），repeat()，minmax()。
   例：

.c {
  display: grid;
  /* 逐列设置列宽 */
  grid-template-columns: 200px 300px 100px;
  /* 用百分比设置 */
  grid-template-columns: 33% 33% 10% 10%; 
  /* 用剩余区域所占比设置 */
  grid-template-columns: 1fr 2fr 3fr; 
  /* 重复n列 */
  grid-template-columns: repeat(3, 100px); 
  /* 自动填充 */
  grid-template-columns: repeat(auto-fill, 100px);
  /* 重复一组有序序列的列 */
  grid-template-columns: repeat(2, 200px 300px 100px);
  /* 自动和设置宽度区间 */
  grid-template-columns: 100px auto minmax(200px , 350px);
}

2. grid-template-rows
   设置行高，设置行高不能使用repeat(auto-fill, xxx)，不知为何。
   vue实例：

<template>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</template>
<style lang="scss" scoped>
ul {
  display: inline-grid;
  width: 700px;
  grid-template-columns: 50% 20px 1fr 2fr;
  grid-template-rows: repeat(2, 100px);
  li {
    line-height: 100px;
    text-align: center;
    font-size: 20pt;
    border: 1px solid black;
  }
}
</style>

渲染效果：其中，700像素的宽按照50%、20px、1片段，2片段分隔。片段之和等于剩余空间之和。

3. 网格线名称
可以通过grid-template-columns:[c1] 100px [c2 c_tow] 200px [tail]; 来给网格线设置名称 ；
其中：第二根网格线有两个名称c2 & c_tow 。

设置溢出网格的宽高

所谓 溢出网格，就是在grid-template-rows和grid-template-columns的设置范围外产生的网格。
需要设置的主要属性如下：
grid-auto-rows、grid-auto-columns。
以上两个属性主要设置了溢出网格的行高和列宽，比如我们有2*2网格如下：

ul{
  grid-template-rows: repeat(2, 100px);
  grid-template-columns: repeat(2, 100px);
}

接着这个方阵变成4*4（新增12个li元素），新增如下代码：

grid-auto-rows: 50px;
grid-auto-columns: 30px;

/*默认不会溢出列，以下相当于强制溢出*/
li:nth-child(4) {
  grid-row-start: 1;
  grid-column-start: 4;
}

得到：

如果把原始网格的右下角比作原点建立二次坐标系，那么第二象限就是原始表格，第四象限的行高就由grid-auto-rows，列宽就是grid-auto-columns，上图中，【11，12，15，16】几个数字所在网格大小就为30px*50px。

设置间隙

设置间隙主要属性如下：
row-gap （原名：grid-row-gap已废弃）、column-gap（原名：grid-column-gap已废弃）、gap（原名：grid-gap已废弃）。

1. row-gap
   设置行间隙
2. column-gap
   设置列间隙
3. gap: （行&列） | （行 列）
   设置行列间隙

例：
code：

<template>
  <div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
ul {
  display: inline-grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  border: 1px solid black;
  li {
    border: 1px solid silver;
  }
}
div {
  padding: 50px;
}
</style>

渲染结果：

设置排列方式

grid-auto-flow
可填值：row | column | row dense | column dense
row 自左向右排列，默认值；
column 是自上向下排列；
添加 dense 则为充分填充，会自动填充忽略的部分。
如下图网格布局（此示例需要设置项目属性）：

设置grid-auto-flow:row dense;后为：

排列网格和项目的位置

默认情况下，容器内的网格和项目都排列在左上角，如图：

其中：
容器是黑色边框，单元格是虚线（调试工具可查看），项目是灰线。

排列网格

主要属性：
justify-content、align-content、place-content
可选值：start | end | center | stretch | space-around | space-between | space-evenly；
justify-content ：排列行内 网格 的位置；
align-content ：排列列内 网格 的位置；
palce-content ：同时设置上述两个属性；

如把每行的 网格 放到最后，使用 justify-content:end;，如图：

如果想要网格居中显示并且间隙相同，则可以使用：place-content:space-evenly;，如图：

因为只是排列了网格，没有排列项目，所以项目还是在左上方。
其余属性不列举。

排列项目

justify-items、align-items、place-items
可选值：start | end | center | stretch ；
justify-items ：排列项目在 网格内 的左右位置；
align-items ：排列项目在 网格内 的上下位置；
place-items ：同时设置上述两个属性；
如果想要项目居中显示，可使用：place-items:center;，如：

可以看见，只能排列项目在网格中的位置，不能设置项目内元素的位置。

注意：如果没有设置项目的大小，那么默认值 stretch 会拉伸项目同网格一样大，其他设置则会去项目的最小宽高。

容器属性简写

主要属性

grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。
grid属性是grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。
— CSS Grid 网格布局教程

项目属性

设置项目大小

主要属性：
grid-column-start，grid-column-end，grid-row-start，grid-row-end，grid-column，grid-row。
上述四条属性决定了项目的上下左右的网格线位置，用数字表示。其中，grid-column和grid-row就是前面几项的简写。
比如一个3*2的网格，共4个li元素，如下：

li:nth-child(1) {
    grid-row-start: 1;
    grid-row-end: 3;
  }

  li:nth-child(2) {
    grid-column-start: 2;
    grid-column-end: 4;
  }

可得：

上述代码中，可以用span代替跨越数量，如：

  li:nth-child(1) {
    grid-row-start: span 2;
  }

  li:nth-child(2) {
    grid-column-start: span 2;
  }

或使用简写：

   li:nth-child(1) {
    grid-row: 1 / span 2;
  }

  li:nth-child(2) {
    grid-column: 2 / span 2;
  }

简写时，参数间使用 '/'分隔。如：

grid-row-start: 1;
grid-row-end: 3;

grid-row: 1 / 3; /* 同上面两行等价 */

设置项目所在区域

主要属性：
grid-area。

1. 在容器设置合理的区域，项目可以自定义本身处于任何区域。
   如给出一个3*3的网格：

.container{
	grid-template-areas:
	    'a b c'
	    'd e f'
	    'g h i';
}

.item:nth-child(1){
	grid-area:e;
}

可得：

2. 可做为grid-column-start，grid-column-end，grid-row-start，grid-row-end的合并写法。
   语法如下：
   grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
   例：

grid-area:1 / 1 / 3 / 3;

设置项目位置

主要属性：
justify-self，align-self，place-self
同justify-items，align-items，place-items，不过是设置单个项目自身的位置。
可取值：
start、end、center、stretch（默认值，拉伸）。
调试略过。

总结

• 网格布局可以使用简要的代码快速完成复杂得布局方式。
• 经测试，Opera，Chrome，Firefox最新版都已经完全兼容，Edge部分属性不兼容，IE不兼容，国产游览器几乎全军覆没。
• 学习过程中几乎找不到缺点，使用盒模型加网格来开发，感觉好嗨哟。