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-rowsgrid-template-columnsgrid-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-gapgrid-row-gap复合语法:grid-gap: 行间距 列间距
    • 设置单元格内容水平对齐方式:justify-items
    • 设置单元格内容垂直对齐方式:align-items

      1. 单元格起始位置对齐:start
      2. 单元格中间位置对齐:center
      3. 单元格结束位置对齐:end
      4. 内容拉伸占满整个单元格:stretch
    • justify-itemsalign-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: 垂直对齐 水平对齐;

你可能感兴趣的