grid布局

1. 控制整个内容区域位置，就是在父元素里哪个位置绘制内容

写在父级元素（display：grid 同级）

• justify-content
  align-content

start | end | center | stretch 项目大小没有指定时，拉伸占据整个网格容器。 | space-around | space-between | space-evenly;

justify-content属性是整个内容区域在容器里面的水平位置（左中右）
align-content属性是整个内容区域的垂直位置（上中下）。
eg:

 <div class="bottom">
      <div class="item">1</div>
      123
       <div class="item">2</div>
    </div>

 .bottom {
    display: grid;
    align-content: center;
    justify-content: center;
    .item {
      background-color: #0e9aac;
      width: 200px;
      height: 40px;
    }
  }

---

2. 控制子元素在单元格中的位置

写在父级

• justify-items
  align-items

start | end | center | stretch 拉伸，占满单元格的整个宽度（默认值）

eg:

---

3. 控制单个项目在单元格中的位置

写在子元素

• justify-self
  align-self

start | end | center | stretch;

---

4. 划分网格，定义列宽，行高

写在父元素

• grid-template-columns ：定义列宽，给定几个参数，就把块分为几列。
  grid-template-rows ：定义行高，给定几个参数，就定义这几行的行高，剩下的行为原始值

取值： px单位，百分数，repeat(3，33%)，repeat(auto-fill, 100px)，fr比例，auto : 根据内容撑开，minmax，fit-content(500px)

.container {
  display: grid;
  
  grid-template-columns: repeat(3, 33.33%); // 3份，每份33.33%

  grid-template-columns: repeat(auto-fill, 100px); // 每份100px，自动填充并换行直到容器放不下
  
  grid-template-columns: repeat(auto-fit, 100px); // 每份100px，自动填充并换行直到容器放不下

  grid-template-columns: 1fr 2fr; // fr为片段简写，表示前者为前者的两倍

  grid-template-columns: 150px 1fr 2fr; // 第一列的宽度为150像素，第二列的宽度是第三列的一半。  

  grid-template-columns: 100px auto 100px; // auto关键字表示由浏览器自己决定长度，默认占满

  grid-template-rows: fit-content(500px)  // 行高会根据内容自动调整，但不超过500px
}

5. 间距

• grid-row-gap ：行间距
  grid-column-gap ：列间距

6. auto-fill，auto-fit 的区别。实现行空间平分布局

• auto-fill ：会把行，全部划分为参数宽度单元格，没有内容保持格子为空

    .wrapper{
        width: 100%;
        display: grid;
        justify-content: space-evenly;
        grid-template-columns: repeat(auto-fill, 100px);
        .item {
            width: 100px;
            height: 90px;
        }
    }

所以，在操作子项目时，它是以所有的格子为子项目来操作，而不是我们写的div，图中div只有4个
如图：justify-content: space-around时，是以所有的格子为单位，而不是四个div

---

• auto-fit ：会把行，有几个子项目，就划几个参数宽度的格子，其余空间不划分

    .wrapper{
        width: 100%;
        display: grid;
        justify-content: space-evenly;
        grid-template-columns: repeat(auto-fit, 100px);
        .item {
            width: 100px;
            height: 90px;
        }
    }

如图：只划分了四个格子，所以在操作格子时，相当于在操作子项目，
如图：justify-content: space-around时，也是以所有的格子为单位，但是这里格子即子项目

所以行空间平分布局

父 {
       display: grid;
       grid-template-columns: repeat(auto-fit, 100px);
       justify-content: space-between;
}