【CSS】Grid布局2

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

Grid布局2

接上文

02. 属性

（1）定义网格容器排布

用于设置网格区域在整个容器区域内的排版

• 声明水平位置：justify-content

• 声明垂直位置：align-content

• 水平与垂直简写：place-content

  .father {
      display: grid;
      width: 700px;
      height: 400px;
      border: 1px solid #000;
      grid-template-columns: 100px 200px 300px;
      grid-template-rows: 50px 100px 150px;
      row-gap: 10px;
      justify-content: center;
      align-content: center;
  }
  

  • 属性值：start | end | center | stretch | space-around | space-between | space-evenly
    • start：居左/上
    • end：居右/下
    • center：居中
    • stretch：拉伸
    • space-around：每个元素两侧的间隔相同，元素与边框也有间隔
    • space-between：每个元素之间的间隔相同，元素与边框没有间隔
    • sapce-evenly：元素与元素、元素与边框之间的间隔都相同
  • place-content：是水平排布和垂直排布的简写
    • 可以设置为一个值，表示水平排布和垂直排布相等
    • 可以设置为两个值，分别表示垂直排布和水平排布

  

（2）定义网格内容排布

用于设置网格区域内的元素的排版

• 声明水平位置：justify-items

• 声明垂直位置：align-items

• 水平与垂直简写：place-items

  .father {
      display: grid;
      grid-template-columns: 100px 200px 300px;
      grid-template-rows: 50px 100px 150px;
      gap: 10px 20px;
      justify-items: start;
      align-items: center;
      /* place-items: center start; */
  }
  
  

  • justify-items：用于声明水平内容排布
    • 属性值有start、end、center、stretch
    • 分别表示居左、居右、居中、拉伸排布
  • align-items：用于声明垂直内容排布
    • 属性值有start、end、center、stretch
    • 分别表示居上、居下、居中、拉伸排布
  • place-items：是水平排布和垂直排布的简写
    • 可以设置为一个值，表示水平排布和垂直排布相等
    • 可以设置为两个值，分别表示垂直排布和水平排布

  

（3）定义多余网格内容

用于设置超出定义的网格区域的元素的排版

• 声明多余行：grid-auto-rows

• 声明多余列：grid-auto-columns

  这里要介绍两个概念，即显式网格和隐式网格

  • 显式网格：即在grid-template-columns和grid-template-rows这两个属性定义的网格区域内的网格
  • 隐式网格：在网格容器内放置了超出网格数量的元素，所占的位置，即为隐式网格

  

  • 如图，如果不设置隐式网格的属性，那么多余的元素会按照其内容的宽高显示

    • 多余的行，其行高按照内容高度，其宽度按照之前网格的列宽
    • 多余的列，其内容高度按照原行高，其宽度按照auto属性自动占据容器剩下的部分，最小为内容宽度

  • 通过grid-auto-rows、grid-auto-columns这两个属性可以设置隐式网格的宽高

    .father {
        display: grid;
        grid-template-columns: 100px 200px 300px;
        grid-template-rows: 50px 100px 150px;
        grid-auto-rows: 100px;
        grid-auto-columns: 100px;
        gap: 10px;
    }
    
    

    

（4）定义网格区域

• 声明区域：grid-template-area

  • 这个属性可以定义一个区域，一个区域可以包括多个单元格

  .father {
      grid-template-areas: 
          "area1 area2 area3"
          "area1 area4 area3";
  }
  

  area解释：

  • 可以是对应网格区域的名称，用具体的变量表示
  • 可以是空的网格单元格，用.标识
  • 可以是未定义的网格区域，用none表示

  关于分布：

  • 整体排布等效于网格区域

  • 一对双引号""内即为一行

  • 有几个area就表示有几列

  • 有上下、左右相同的area相邻，表示其单元格合并，但必须是规则的排布，如L、T字形的就不行

  • 然后使用grid-area属性，在子项的类中声明其属于哪个区域即可

    .son1 {
        grid-area: area1;
    }
    .sno2 {
        grid-area: area2;
    }
    .son3 {
        grid-area: area3;
    }
    .son4 {
        grid-area: area4;
    }