最近在网上看了Grid的入门基础， 做一下笔记自己记录下。

前面的话

有了 grid 以后可以更简单的完成复杂页面的二维布局。 而不需要去抠1px的margin、padding，而头痛许久。

本文通过几个小例子进行演示

创建HTML结构

首选创建一个class为box的div 里面有9个class为content的子div; 友好的是grid依然可以配置flex使用; 我们为.contet的写上一些样式; 代码如下

HTML 代码:

1
2
3
4
5
6
7
8
9
10
11
<div class="box">
  <div class="content">1</div>
  <div class="content">2</div>
  <div class="content">3</div>
  <div class="content">4</div>
  <div class="content">5</div>
  <div class="content">6</div>
  <div class="content">7</div>
  <div class="content">8</div>
  <div class="content">9</div>
</div>

CSS 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
* {
    margin: 0;
    padding: 0;
}
.content {
    display: flex;
    justify-content: center;
    align-items: center;
    background: blue;
    font-size: 30px;
    color: #fff;
    font-weight: bold;
    border: 1px solid red;
  }

此时在浏览器中打开页面, 正常的盒子形状从上向下排列; 显示为下图:

浏览器中的图片

grid 出场 (定义grid)

下面有请我们的主角 Grid 出场。 使用方式为display: grid;在看我们的css代码:

CSS 代码:

1
2
3
4
.box {
  display: grid;
  /* display: inline-grid; 行内元素的grid 不接受定义宽高 */
}

小伙伴 grid-template-columns 和 grid-template-rows (构建行与列)

此时页面并没有什么变化, grid 需要一些小伙伴来配置它. 见下表:

代码 功能 单位 简写
grid-template 定义列 与 行的数量及之间的比例关系 px dr auto em 非负值 grid-template: grid-template-columns / grid-template-rows;
grid-template-columns 确认有几列及列于列之间的大小比例 px dr auto em 非负值 –
grid-template-rows 确认有几行及行与行之间的大小关系 px dr auto em 非负值 –

注解: fr 单位(等分); fr 是为网格布局定义的一个新单位。它可以帮助你摆脱计算百分比，并将可用空间(父元素的高与宽)等分。

我们小伙伴加入代码中在看一下效果

1
2
3
4
5
6
7
.box {
  display: grid;
  grid-template-columns: 300px 300px 300px;
  grid-template-rows: 200px 200px 200px;
  /* 简写为 */
  /* grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;*/
}

上面的代码表示我们将让页面构成, 3行, 3列的九宫格布局; 每一格的宽度为 300px 高为200px; 如下图:

九宫格

我们也可以使用新的单位 dr, 我们来改一下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  .box {
    display: grid;
    /* 将宽高设置300px */
    width: 300px; 
    height: 300px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;

/* 当我们有很多fr要写的时候手写代码会比较麻烦 
   因此可以使用`repeat()` 函数 
   它接收两个参数 1. 要拷贝的次数 2. 要拷贝的内容  代码如下: 
*/

  / *
    grid-template-rows: repeat(3, 1fr);
   */
  }

修改代码以后的页面, 可以看得出来, 子div的宽高都变为了平均的100px; 效果如下图:

小伙伴 grid-gap (区域之间的距离)

grid-gap 它的主要功能是记录区域与区域之间的间距

代码 功能 参数 简写
grid-gap 只能创建列与列或行与行之间的间距，但不能创建列和行与网格容器边缘的间距。 px fr % em 非负值 grid-gap: grid-row-gap grid-column-gap;
grid-row-gap 创建行与行之间的间距 px fr % em 非负值 –
grid-column-gap 创建列与列之间的间距 px fr % em 非负值 –

我们来修改下代码:

CSS 代码: 

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
  display: grid;
  width: 300px;
  height: 300px;
  /* 给父div加上背景色 */
  background: #09c;
  /* 让父div居中 */
  margin: 30px auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  /* 使每个子div之间的间距为10px 但是与父元素的边缘没有间距 */
  grid-gap: 10px;
}

加入 grid-gap:10px后, 子div之间有了10px的间距, 可以看到父元素的背景色, 效果如下图:

效果图:

小伙伴 grid-area 等 (位置变化)

在flex 布局方法中设计到一些元素的位置变化像order属性它的值越小越靠前显示, 在grid中也有提供这种位置变化, 而且它使用起来更加方便, 首先我们来介绍几个小伙伴:

代码 功能 参数 简写
grid-row-start 移动后的位置开始的行数 Number —
grid-row-end 移动后的位置结束的行数 Number —
grid-row 移动后所在行的位置 Number grid-row:grid-row-start / grid-row-end;
grid-column-start 移动后的位置开始的列数 Number —
grid-column-end 移动后的位置结束的列数 Number —
grid-column 移动后所在列的位置 Number grid-row:grid-row-start / grid-row-end;
grid-area 移动位置的简写 Number grid-area:row-start/column-start/row-end/column-end;

首先需要理解 grid 行与列之间的关系 它就像笛卡尔坐标系从左上角开始以此向右边和下边延伸, 每一行或每一列就是一个坐标系, 但是它的原点值是从1开始的; 如下图:

当明白了 grid 中这么一个”坐标系”以后就可以尝试着移动子元素的位置, 下面的代码将内容是6的子div移动至内容是2的位置; 看代码:

CSS 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 寻找到要移动的div */
.content:nth-child(6) {    
  /*
  要移动值 区域 2 的位置, 从上面的"坐标系"的图可以清楚看到以后的位置的
  行的开始数为1 , 结束位置为 2;
  列的开始位置为 2, 结束的位置为3;
  */
  grid-row-start: 1;
  grid-row-end: 2;
  /* 简写为 */
  /*grid-row: 1/2;*/

  grid-column-start: 2;
  grid-column-end: 3;

  /* 简写为 */
  /*grid-column: 2/3;*/

  /* 超级简写 */
  /*grid-area: 1/2/2/3;*/
}

效果图:

grid 在移动位置的同时可以改变原来我们定义好的比例值, 代码示例:

CSS 代码: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*我们将上面的css代码修改为如下*/
.content:nth-child(6) {  
 grid-row-start: 1;
 grid-row-end: 2;
 grid-column-start: 2;
 grid-column-end: 4; /* 我们让6号div移动后的位置在第四列结束 */

 /* 也可写做下面的情况 */

 /* grid-column-end: span 2; */

  /* 可以理解为从移动后的位置占用几个"坐标单位", 当值大于我们在 `grid-template` 中定义的行数 或者 列数时, `grid` 会按照你从新定义的数去从新分配行数或列数 */
}

当我们改变了移动后的结束值时, 也就是此时6号div 在列的”坐标轴”相当于是占用了两个单位的宽度, 在chrome审查元素模式下,看起来很明显, 6号占了两个小方块的位置; 效果如下图:

效果图:

grid-template-areas 命名法布局

grid 还为我们提供了一种更加直观的布局方式, 我们可以通过在子元素中定义属性grid-area 给当前子元素的位置定义一个名字, 在父元素的属性grid-area中按照名称的排列来实现布局: 请看下面的代码演示

HTML 代码: 

1
2
3
4
5
6
7
8
<!-- 这是一个很常见的布局 -->
<div class="wrap">
  <header class="header textStyle">header</header>
  <aside class="aside textStyle">aside</aside>
  <main class="main textStyle">main</main>
  <footer class="footer textStyle">footer</footer>
</div>

CSS 代码: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
* {
  margin: 0;
  padding: 0;
}

.textStyle {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: #fff;
  font-weight: bold;
}


.wrap {
  display: grid;
  width: 100%;
  height: 500px;
  margin: 20px auto;
  background: #eee;
  /* 需要三行 两列的布局 */
  grid-template: 1fr 5fr 1fr/ 1fr 3fr; 
  grid-gap: 10px;
  /* 三行两列 这样写很直观 */
  grid-template-areas: "header-area header-area"
             "aside-area main-area"
             "footer-area footer-area";
}

.header {
  grid-area: header-area; /* 定义名称 */
  background: #60D194;
}

.aside {
  grid-area: aside-area;
  background: green;
}

.main {
  grid-area: main-area;
  background: #09c;
}

.footer {
  grid-area: footer-area;
  background: blue;
}

效果图:

参考文献

参考自以下文章:

https://zhuanlan.zhihu.com/p/26757425?group_id=844328463711240192
https://www.w3cplus.com/css/learncssgrid.html