CSS display:grid 网格布局

Love The Way You Lie 2022-11-26 01:44 240阅读 0赞

主要属性：  
grid-template-columns：//竖向排列  
grid-template-rows：//横向排列

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。  
**区别：**

*  Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
 *  Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大

首先比较一下flex和grid实现自适应九宫格，高度800px，宽度适应：  
**flex**：超过一层后样式就复杂了，特别是边框的处理有点复杂

<html>
    <head>
      <style type="text/css">
       .box { 
          padding: 10px;
          padding-bottom: 0;
          padding-right: 0;
          display: flex;
          flex-direction: column;
          height: 800px;
          width: calc(100vw - 20px);
          background-color: #000;
        }
        .content { 
          display: flex;
          margin-bottom: 10px;
          flex: 1
        }
        .bText { 
          flex: 1;
          margin-right: 10px;
          background-color: deepskyblue;
        }
      </style>
    </head>
    <body>
      <div class="box">
        <div class="content">
          <div class="bText">1</div>
          <div class="bText">2</div>
          <div class="bText">3</div>
        </div>
        <div class="content">
          <div class="bText">4</div>
          <div class="bText">5</div>
          <div class="bText">6</div>
        </div>
        <div class="content">
          <div class="bText">7</div>
          <div class="bText">8</div>
          <div class="bText">9</div>
        </div>
      <div>
    </body>
    </html>

***flex布局九宫格的效果图：***  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70]

\*\*grid：\*\*方法也可以有很多，相对flex而言写起来代码简洁

<html>
    <head>
      <style type="text/css">
        .content { 
          padding: 10;
          display: grid;
          grid-template-columns: auto auto auto;
          grid-template-rows: auto auto auto;
    	  /* padding 有个20的宽度 */
          height: 780px;
          background-color: #000;
          grid-gap: 10px;
        }
        .bText { 
          background-color: slateblue;
        }
      </style>
    </head>
    <body>
      <div class="content">
        <div class="bText">1</div>
        <div class="bText">2</div>
        <div class="bText">3</div>
        <div class="bText">4</div>
        <div class="bText">5</div>
        <div class="bText">6</div>
        <div class="bText">7</div>
        <div class="bText">8</div>
        <div class="bText">9</div>
      </div>
    </body>
    </html>

***grid布局九宫格的效果图：***  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70 1]  
grid常用属性如下：  
1）：**高度 高度 高度/(一)列 (二)列 (三) 列**

grid: 1fr 1fr 1fr/1fr 1fr 1fr ;

示例如下：

grid: 100px 200px 100px /1fr 1fr 1fr;
    // 等于
    grid-template-rows: 100px 200px 100px; 
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: none; 
    grid-auto-flow: initial;
    grid-auto-rows: initial;
    grid-auto-columns: initial;

2）：**定义列，按照你希望它们在网格中出现的顺序，把grid -template-columns 属性设置为列大小**

grid-template-columns: 100px 100px; //有几列，每列有多大

.grid { 
        display: grid;
        grid-template-columns: 100px 100px 100px; // 定义三个宽度为100px的单元格
    }

3）：**用于定义网格中行的数量和大小**

grid-template-rows :100px 100px; //有几行，每行有多大

4）：**grid 是 grid-template-rows、grid-template-columns 和 grid-template-areas 三个属性的简写**

//[名称] '几列' 这行的高度 [名称] /三列对应的三个宽度
    //（名称可为空 '1 1 1' 就是均分三列）
    grid-template: [] '1 1 1' 100px [] /auto 50px auto;

.grid { 
        display: grid;
        grid-template:
            "header header header" 80px
            "nav article article" 600px
            / 100px 1fr;
    }

5）：**定义上下左右间隔 + 列之间的间隔大小 + 行之间的间隔大小**

grid-gap: 10px 20px ;//上下间隔10px，左右间隔20px
    grid-gap: 10px；//上下左右间隔10px
    grid-column-gap
    grid-row-gap

6）：**justify-items：网格容器（ grid container） 的属性，设置 网格项(grid items)中的内容（the content within grid items） 沿着行轴线（水平方向）上的对齐方式，适用于容器内的所有网格项**

*  start：将内容对齐到网格区域(grid area)的左侧
 *  end：将内容对齐到网格区域的右侧
 *  center：将内容对齐到网格区域的中间（水平居中）
 *  stretch：填满网格区域宽度（默认值）
 *  space-around：在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间
 *  space-between：在每个网格项之间放置一个均匀的空间，左右两端没有空间
 *  space-evenly：在每个栅格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间

7）：**align-items：定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式**

*  start：将内容对齐到网格区域(grid area)的顶部
 *  end：将内容对齐到网格区域的底部
 *  center：将内容对齐到网格区域的中间（垂直居中）
 *  stretch：填满网格区域高度（默认值）

8）：**align-content：在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）**

*  start：将网格对齐到 网格容器(grid container) 的顶部
 *  end：将网格对齐到 网格容器 的底部
 *  center：将网格对齐到 网格容器 的中间（垂直居中）
 *  stretch：调整网格项(grid items) 的高度，允许该网格填充满整个网格容器 的高度
 *  space-around：在每个网格项之间放置一个均匀的空间，上下两端放置一半的空间
 *  space-between：在每个网格项之间放置一个均匀的空间，上下两端没有空间
 *  space-evenly：在每个栅格项目之间放置一个均匀的空间，上下两端放置一个均匀的空间

9）：**fr 是为 css 网格布局创建的新单位。 fr 使你不需要计算百分比就能创建灵活的网格， 1fr 表示可用空间的一等份**

.grid { 
        display: grid;
        grid-template-columns: 3fr 4fr 3fr; // 宽度分为3+4+3=10个等份，4个单元格分别占3、4、3份
        grid-template-columns: 3fr 4fr 3fr 2fr; // 宽度分为3+4+3+2=12个等份，4个单元格分别占3、4、3、2份
    }

10）：**grid-auto-flow 属性控制 网格单元 如何流入网格，其默认值为 row。网格中的“网格单元”将会被一一填充，直到没有剩余的项目为止**

.grid { 
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-auto-flow: column;
    }

11）：**repeat() 函数有助于使 网格轨道 列表变得不是那么多余，并为其添加了语义层**

.grid { 
        display: grid;
        // 重复3次的 1fr 2fr。 还可以是：grid-template-columns:2fr repeat(5，1fr) 4fr;
        grid-template-columns: repeat(3, 1fr 2fr); 
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70]: /images/20221124/ea9c35f8050743e4826fc3b099b8b03d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70 1]: /images/20221124/16d55cead2254c979d246ffe1981bba2.png