12 grid的基本操作

主要内容：

1. grid的介绍
2. grid基本属性
3. item填充及简写
4. 跨界区块操作

1、grid的介绍

① grid: 网格。基本术语包括

• 容器: 使用网格布局的元素
• 项目: 容器中的子元素
• 网格线: 将容器划分为行与列的直线
• 显式网络: 由用户根据项目数量指示容器生成的网格
• 隐式网格: 由容器根据项目数量自动生成的网格
• 单元格: 项目放置的具体空间
• 网格区域: 一个以上的单元格组成的矩形区域

② 与flex的基本区别
flex : 容器 ===》 项目
grid: 容器 ===》 单元格 ===》 项目
想建立容器，然后建立单元格，最后再放入项目。

2、grid基本属性

    <style>
      .container {
        width: 300px;
        height: 300px;
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
        /*上面的就相当于建立三列三行，每列每行的间距为100px。
        当然这个地方也可以用fr，eg 1fr，自动宽度*/
      }
      .container > .item {
        border: 1px solid #000;background-color: lightgreen; 
      }
    </style>

• 如果间隔等距离一样，也可以用repeat简化快速创建

      .container {
        width: 500px;
        height: 300px;
        display: grid;
        grid-template-columns: repeat(5, 100px);
        grid-template-rows: repeat(3, 100px);

• 网格线的设置

        column-gap: 5px;
        row-gap: 5px; 
        /* 如果都一样，也可以简化成 */
        gap: 5px;

3、item的填充

item部分：

    <div class="container">
      <div class="item">header</div>
      <div class="item">left</div>
      <div class="item">main</div>
      <div class="item">right</div>
      <div class="item">footer</div>
    </div>

css部分

    <style>
      .container {
        width: 300px;
        height: 300px;
        display: grid;
        grid-template-columns: 40px 1fr 40px;
        grid-template-rows: 30px 1fr 30px;
      }
      .container > .item:first-of-type {
        background-color: lightgreen;
        /* grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2; */
        /* grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 2;
        grid-row-end: 3; */
    /* 默认总是跨越一行或一列，因此也可以简写 */
        /* grid-column-start: 3;
        grid-row-start: 2; */
    /* 将项目放到多个网格区域中：跨网格 */
        /* grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 2;
        grid-row-end: 4; */
    /* 也可以这样写，行与列的跨越 */
        /* grid-column-start: 2;
        grid-column-end: span 2;
        grid-row-start: 2;
        grid-row-end: span 2; */
    /* 简化 */
        /* grid-column: 起始列号 / 结束列号;
        grid-row: 起始行号 / 结束行号 */
        /* grid-column: 2 / 4; */
        /* grid-column: 2 / span 2; */
        /* grid-row: 2 / 4; */
        /* grid-row: 2 / span 2; */
    /* 跨越整行 */
        /* grid-column: 1 / 4;
        grid-column: 1 / span 3; */
    /* 使用负标 */
        /* grid-column: 3 / 4; */
        /* grid-column: -1 / -3; */
    /* 充满整个容器 */
        /* grid-column: 1 / span 3;
        grid-row: 1 / span 3; */
    /* 根据项目的当前默认位置进行简化。默认为1 1 */
        /* grid-column: span 3;
        grid-row: span 3; */
    /* 想写得更加的直观 */
        /* grid-column-start: 1; */
        /* grid-column-end: span 3; */
        /* grid-row-start: 1; */
        /* grid-row-end: span 3; */
    /* 示例：header */
      /* .container > .item:first-of-type {
        grid-column-end: span 3;
      } */
    /* 这块案例可以省略掉的，因为刚好已经落在了对应的位置 */
      /* .container > .item:nth-of-type(2) {
        grid-column: 1 / 2;
      }
      .container > .item:nth-of-type(3) {
        grid-column: 2 / 3;
      }
      .container > .item:nth-of-type(4) {
        grid-column: 3 / 4;
      } */
      .container > .item:first-of-type,
      .container > .item:last-of-type {
        grid-column-end: span 3;
        background-color: lightgreen;
      }
    </style>

4、快速区块填充（grid-area）

• css中进行区块命名
• 用grid-template-areas结合命名进行直观快速填充

1. div部分

    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
    </div>

2. css命名部分

      .container {
        width: 300px;
        height: 300px;
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        /* column-gap: 5px;*/
        /* row-gap: 5px; */
        /* gap: 5px; */
      .container > .item:first-of-type {
        background-color: yellow;
        /* grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 2;
        grid-row-end: 4; */
    /* 使用网格区域属性: grid-area */
    /* grid-area: 行起始 / 列起始  / 行结束 / 列结束 */
        /* grid-area: 2 / 2 / 4 / 4; */
        /* grid-area: span 2 / span 2; */
    /* 索引网格区域 */
        /* grid-area: 2 / 2 / span 2 / span 2; */
    /* 命名网格区域 */
        grid-area: ye;
      }
        .container > .item:last-of-type {
        background-color: red;
        grid-area: re;
      }

3. 直观填充

      .container {
        grid-template-areas:
          "ye ye ye"
          ". . ."
          "re re re";
      }
   /* 中间的部分为默认，不管*/

5、用grid快速做一个三列网页

最后的界面是这样的:

    <div class="container">
      <span class="itme item1"></span>
      <a class="itme item2"></a>
      <div class="itme item3"></div>
      <div class="itme item4"></div>
      <div class="itme item5"></div>
    </div>

css部分

    <style>
      .container {
        width: 400px;
        height: 400px;
        background-color: wheat;
        display: grid;
        /* 划分列 */
        grid-template-columns: 80px 1fr 80px;
        grid-template-rows: 40px 1fr 40px;
        /* 设置区域名称。这块厉害了。 */
        grid-template-areas:
          "header header header"
          "left main right"
          "footer footer footer";
      }
      .item1 {
        grid-area: header; /*命名，支持上面的*/
        background-color: lightgreen;
      }
      .item2 {
        grid-area: left;
        background-color: yellow;
      }
      .item3 {
        grid-area: main;
        background-color: lightblue;
      }
      .item4 {
        grid-area: right;
        background-color: lightcyan;
      }
      .item5 {
        grid-area: footer;
        background-color: lightgreen;
      }
    </style>