grid布局的属性讲解及案例实现

基本dom结构

  <div class='container'> // 子元素默认撑满整个网格
    <div class='one'>one</div>
    <div class='two'>two</div>
    <div class='three'>three</div>
    <div class='four'>four</div>
    <div class='five'>five</div>
  </div>

属性分析

grid
包括 grid-template-rows/grid-template-columns/grid-template-areas
- grid-template-rows
  定义 container 的行，以空格隔离，值为行的高度。
- grid-template-columns
  定义 container 的列，同上。
- grid-template-areas
  用字符串来命名分割好的区域，子元素的grid-area去认领父元素中grid-template-areas定义的区域名。
注意正确分割，每一行的列数要相等，如果某一块区域为空，填上.。

子元素总是要处于父元素中的，如果grid-template-areas的网格分割不够合理。比如子元素定义了grid-area，在父元素的grid-template-areas中却没有其值，那么整个布局会很恐怖。另外，如果一些子元素没有定义grid-area，那么这些子元素会在其他子元素定位完成后，按照grid-auto-flow（默认值为row）的规则来定位。
```
  .container {
    display: grid;
    width: 400px;
    grid-template-areas:
      "one one"
      "two three"
      "four five";
  }
  .one {
    grid-area: one;
  }
  .two {
    grid-area: two;
  }
  .three {
    grid-area: three;
  }
  .four {
    grid-area: four;
  }
  .five {
    grid-area: five;
  }
```
会形成以下布局：
grid-gap
定义grid cell之间的间隔（包括 grid-row-gap 和 grid-column-gap）
- grid-row-gap
  定义grid cell行之间的间距
- grid-column-gap
  定义grid cell列之间的间距
grid-auto-flow
通过控制自动布局算法的运作原理，精确指定自动布局的元素在网格中的排列方式
以下用例子分析
```
.container {
  display: grid;
  width: 400px;
  grid-auto-flow: <value>;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, min-content);
  div {
    border: 1px solid rgba(225, 225, 225, 0.8);
  }
  .one {
    grid-column: 2 span; // 这里表示占据两列
  }
  .two {
    grid-column: 2 span;
  }
}
```
- 如果<value>为row
子元素优先按行排列，第一行位置不够，换第二行，以此类推。
- 如果<value>为column
子元素优先按列排列，注意 four 的位置，当第一列位置不够之后，从第二列开始找位置。

此时，我设置four为grid-column: span 2;，可以看到
- 如果<value>为dense
尽可能的紧凑排列（每个元素的排列都从左上角到右下角合理选择位置，使得子元素之间尽量不留空隙）
grid-auto-rows
定义没有给定高度的 row 的高度（即子元素没有设置 height，父元素的 grid-template-rows 也没有明确给出 row 的高度）
grid-auto-columns
定义没有给定宽度的 column 的宽度（同上）
grid-row
定义在子元素上，表示子元素的行的起止位置。
- grid-row-start
- grid-row-end
grid-column
定义在子元素上，表示子元素的列的起止位置。
- grid-column-start
- grid-column-end 以下是一个 3 列的网格，每条网格线（列）的位置已经用数字标好。
  为了使子元素占据右边两列，可以设置：
  grid-column: 2 / 4 表示子元素列宽是占据 line 2 到 line 4 中间的位置。
  grid-column: 2 / span 2 表示子元素是占据从 line 2 开始2个列款宽的位置。

注意，0是错误值，会使此属性失效。此时大于4的值都会被认为是4，同理，小于-4的值都会被认为是-4。

如果出现两个值相同的情况，那么start为这个值，默认占据一行或一列

最后
当子元素有了自己的size，子元素不一定能撑满当前的grid cell，默认位于左上角。
通过设置父元素的 justify-items 和 align-items或者子元素的 justify-self 和 align-self 可以设置网格中元素的位置。

一些属性值

repeat
简化网格行列的定义
比如 grid-template-columns: repeat(2, 50px 1fr) 100px; 等于 grid-template-columns: 50px 1fr 50px 1fr 100px;
fit-content
grid-template-columns: fit-content(300px) fit-content(300px) 1fr;

左边部分，由于内容区宽不足300px，所以左边区的宽度以内容区为准，中间内容区的宽度会大于 300px,此时受300px的限制，宽为 300px，右边1fr占据剩余所有空间。所以这个属性类似于设置max-size。
min-content
grid-template-columns: min-content minmax(200px, 1fr) 1fr;

这个值的意思是，取内容区最小宽度值的最大值。典型的例子就是以上，英文单词是默认不换行的，所以取最长的一个单词brightest所占据的宽度为此div的宽度。中间部分取1fr，与右边部分的1fr，按1:1的比例，分割剩余的空间。
fr
显示定义 size 的子元素占据父元素的空间后，剩余的空间留给被给予 fr 值的子元素。
那么对于只有一个剩余的子元素来说，size定义为1fr或者2fr没有没什么区别，都是占据剩余的所有空间。
而对于两个或两个以上的子元素，size按照fr前面的数字，等比分割剩余的空间。
可以同flex布局中的 flex: <number> 类比。

案例实现

基本dom结构

<body>
  <div class='container'> // 蓝色
    <div class="header"></div> // 红色
    <div class="aside"></div> // 紫色  
    <div class="content"></div> // 黄色
  </div>
</body>

第一种布局：header定高200px，宽度铺满，aside定宽350px，content自适应

方法1

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  .container {
    width: 100%;
    height: 100%;
    background-color: #a0eee1;
    display: grid;
    grid-template-rows: 200px 1fr; // 定义第一行为200px定高 第二行高度占据剩余高度（100% - 200px）的两行布局
    grid-template-columns: 350px 1fr; // 定义第一列为350px定宽 第二列宽度占据剩余宽度的两列布局
    .header {
      background-color: #f4606c;
      grid-column: span 2; // == 1 / 3 // 设置header占据两列，从line1到line3 所以aside会被挤到第二行
    }
    .aside {
      background-color: #c7b3e5;
    }
    .content {
      background-color: #fdffdf;
    }
  }
}

方法2

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  .container {
    width: 100%;
    height: 100%;
    background-color: #a0eee1;
    display: grid;
    grid-template-areas:  // 用area定义好子元素的布局
                        'header header'
                        'aside content';
    grid-auto-rows: 200px 1fr; // 定义自由行的高度  
    grid-auto-columns: 350px 1fr; // 定义自由列的宽度  
    .header {
        background-color: #f4606c;
        grid-area: header;
    }
    .aside {
        background-color: #c7b3e5;
        grid-area: aside;
    }
    .content {
        background-color: #fdffdf;
        grid-area: content;
    }
  }
}

以上，因为container中没有定义网格的行列的size（未通过grid-template-rows和grid-template-columns显示定义）,也没有对于子元素显示定义宽高，所以grid-auto-rows和grid-auto-columns生效。

其中

grid-auto-rows: 200px 1fr;
grid-auto-columns: 350px 1fr;
grid-template-areas:
                    'header header'
                    'aside content';

可以替换为

grid-template:
              'header header' 200px
              'aside content' 1fr
              / 350px 1fr;

参考

CSS_Grid_Layout