CSS样式——Grid 网格布局

• 开启Grid 网格布局

  • 块级元素开启：display:grid
  • 行内元素开启：display:inline-grid
  • 容器设置网格布局后，里面顶层子元素成为容器成员，但子元素内部元素不属于容器成员，并且float、clear、vertical-aligin 、display:inline-block / table-cell 样式都会失效
  • 容器水平区域称为行，垂直区域称为列，行与列交叉形成的区域称为单元格，划分网格的线叫网格线

• 作用与容器上的样式

  • 单位：像素(px)、百分比(px)、网格比例分配（fr）
  • 划分网格的行：grid-template-rows

  • 划分网格的列：grid-template-columns
    重复值简化写法：repeat( 重复次数,单元格大小)

    • 自适应划分个数：auto-fill
    • 单元格范围值：minmax(最小，最大)
    • 单元格自适应宽度：auto

  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(auto-fill,minmax(20px,auto));
  grid-template-columns: repeat(auto-fill,minmax(20px,auto));

  • 定义划分的网格区域名称
    语法：grid-template-ares
    区域名字与 grid-ares 相对应
  • grid-template-rows、grid-template-columns、grid-template-ares 复合语法：grid-template:'区域名称' 行/列

  // 书写方式一：
  grid-template:
    [header-left] "head head"  30px [header-right]
    [main-left] "nav main"  1fr [main-right]
    [footer-left] "nav foot"  30px [footer-right]
      / 100px  1fr;
  / [header-left] 表示说明区域作用
  
  
  // 书写方式二：
  grid-template:
    "a b c"  30px
    "e f g"  30px
    "h i j"  30px
    / auto;

  • 设置单元格行间距：grid-column-gap
  • 设置单元格列间距：grid-row-gap

  grid-column-gap: 10px;
  grid-row-gap: 10px;

  • grid-column-gap、grid-row-gap复合语法：grid-gap: 行间距 列间距
  • 设置单元格内容水平对齐方式：justify-items

  • 设置单元格内容垂直对齐方式：align-items

    1. 单元格起始位置对齐：start
    2. 单元格中间位置对齐：center
    3. 单元格结束位置对齐：end
    4. 内容拉伸占满整个单元格：stretch
  • justify-items、align-items复合语法：place-items:垂直对齐 水平对齐
  • 设置整体网格水平对齐：justify-content

  • 设置整体网格垂直对齐: align-content

    1. 相对于容器起始位置对齐：start
    2. 相对于容器中间位置对齐：center
    3. 相对于单元格结束位置对齐：end
    4. 单元格拉伸占满整个容器：stretch
    5. 单元格两侧空白区域相等分布在容器内：space-between
    6. 单元格与单元格均分空白区域分布在容器内：space-evenly
  • justify-content、 align-content复合语法：place-content: 垂直对齐 水平对齐

• 作用在子元素上的样式

  • 子元素水平方向占据单元格起始位置：grid-column-start
  • 子元素水平方向占据单元格结束位置：grid-column-end
  • 子元素垂直方向占据单元格起始位置：grid-row-start
  • 子元素垂直方向占据单元格结束位置：grid-row-end

  grid-column-start:第几条网格线;
  grid-column-end:第几条网格线;
  grid-row-start:第几条网格线;
  grid-row-end:第几条网格线;
  grid-column-start:span 2;
  grid-row-start:span 2;

  • 复合写法：
    grid-column:起始线 / 结束线;
grid-row:起始线 / 结束线
  • 设置单元格内容水平位置：justify-self

  • 设置单元格内容垂直位置：align-self

    1. 单元格起始位置对齐：start
    2. 单元格中间位置对齐：center
    3. 单元格结束位置对齐：end
    4. 内容拉伸占满整个单元格：stretch
  • justify-self、align-self复合语法：place-self: 垂直对齐 水平对齐;