网格布局

• grid（网格）布局，CSS3新增。二维的基于网格的布局方式

• 采用grid布局的元素，称为网格容器。网格容器的子元素称为网格项目。构成网格结构的分界线称为网格线。网格线之间的空间称为网格单元格

• 将容器设置为网格布局

  .container{
    /* 容器元素是块级元素 */
    display:grid;
  }
  .container{
    /* 容器元素是行内元素 */
    display:inline-grid;
  }
  

• 容器的属性

  • grid-template-columns 定义列的数量和宽度，取值举例：
    • 100px 50px 200px 表示分为3列，每列宽度分别为 100px、50px、200px
      • 单位也可以使用%等
    • 100px auto 100px
      • 取值也可以为 auto 关键字，表示宽度自适应，一般为单元格最大宽度
    • 1fr 1fr 2fr 表示分为3列，其中第3列是前两列的2倍
      • 为了方便表示比例关系，网格布局提供了 fr(fraction，片段) 关键字
      • 该单位也可以和绝对长度一起使用 100px 1fr 2fr
    • 100px 100px minmax(100px,1fr)
      • minmax() 函数，接收两个参数，分别为最小值和最大值
    • repeat(4,20%) 表示分为4列，每列的宽为20%
      • repeat() 函数，接受两个参数。第一个参数是重复的次数，第二个参数是重复的值
      • repeat(4,80px 100px) 重复80px 100px的设置4次，分为8列
      • repeat(auto-fill,100px) 每列宽100px，自动填充，直到容器不能放更多的列
    • [a1] 100px [a2] 100px [a3] 100px [a4] 分为3列，并指定纵向网格线的名字
      • 同一网格线也可以有多个名字，如[a1 b1]
      • 网格线的名字如果不指定默认为：垂直方向从上到下 1 2 3... 以此类推，水平方向从左到右 1 2 3... 以此类推
  • grid-template-rows 定义行的数量和宽度，取值同grid-template-columns
  • column-gap 设置列于列之间的间距
  • row-gap 设置行与行的间隔
  • gap row-gap和column-gap属性的简写，gap:row-gap column-gap;
    • 如果gap属性省略第二个值，第二个值会默认等于第一个值
  • grid-auto-flow 规定网格的子元素排列方向，取值：
    • row 默认，先行后列
    • row dense 先行后列，且如果行还有空余，先排满行
    • column 先列后行
    • column dense 先列后行，如果列还有空余，先排满列
  • grid-auto-rows 设置行高，参数类似grid-template-rows，但是不需要指定行的数量。由项目决定
  • grid-auto-columns 用法同grid-auto-rows
  • grid-template-areas 定义区域，用法举例：

    .container{
      /* 先划分9个单元格，然后命名为a~i的9个区域 */
      /* 区域的命名会影响到网格线的名字。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end */
      display:grid;
      grid-template-columns:repeat(3,100px);
      grid-template-rows:repeat(3,100px);
      grid-template-areas:'a b c' 'd e f' 'g h i';
      /* grid-template-areas:'a a a' 'b b b' 'c c c'; 多个单元格合并成一个单元格，9个单元格分为a、b、c三个区域 */
      /* grid-template-areas:'a . c' 'd . f' 'g . i'; 不需要的区域，用 . 表示 */
    }
    

  • justify-items 设置单元格内容的水平位置，取值：
    • stretch 默认，拉伸，占满单元格的宽度
    • start 单元格的水平起始位置对齐
    • end 单元格的水平终点位置对齐
    • center 单元格水平居中
  • align-items 设置单元格内容的垂直位置，取值同justify-items
  • place-items align-items和justify-items属性的简写形式
    • 省略第二个值，第二个值会默认等于第一个值
  • justify-content 设置容器内整个内容区域的水平位置，可能会覆盖gap属性的效果
    • stretch 默认，项目没有指定大小时，拉升占满整个网格容器
    • start 容器的水平起始位置对齐
    • end 容器水平终点位置对齐
    • center 容器水平居中
    • space-around 列之间的间隔相等，比列与容器边框的间隔大一倍
    • space-between 列之间的间隔相等，列与容器边框之间没有间隔
    • space-evenly 列之间以及列与容器边框之间的间隔都相等
  • align-content 设置容器内整个内容区域的垂直位置
    • 取值同justify-content，只是将水平方向改成垂直方向
  • place-content align-content和justify-content属性的简写形式
    • 省略第二个值，第二个值会默认等于第一个值
  • grid-template 是grid-template-columns、grid-template-rows和grid-template-areas属性的简写形式，不推荐使用
  • grid 是grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow属性的简写形式，不推荐使用

• 项目的属性

  • grid-column-start 指定项目最左侧所在的垂直网格线
  • grid-column-end 指定项目最右侧所在的垂直网格线
  • grid-row-start 指定项目最上面所在的水平网格线
  • grid-row-end 指定项目最下面所在的水平网格线
  • grid-column grid-column-start和grid-column-end的简写形式，grid-column:start/end;
    • grid-column:1/4; 表示从第1根垂直网格线到第4根垂直网格线，横跨3个单元格
  • grid-row grid-row-start和grid-row-end的简写形式，grid-row:start/end;
    • grid-row:2/4; 表示从第2根水平网格线到第4根水平网格线，纵跨2个单元格
    • 这些属性也可以使用 span 关键字，表示跨越多少个网格，如：
      • grid-column:1/4; 也可以写为 grid-column:1/span 3;
  • grid-area 指定项目在哪个区域，配合grid-template-areas属性一起使用，grid-area:a;表示项目在a区域
    • 同时该属性也可以看作grid-row-start、grid-column-start、grid-row-end、grid-column-end属性的简写形式
      • grid-area:row-start/column-start/row-end/column-end; 按上、左、下、右逆时针顺序指定
  • justify-self 指定单个项目在单元格中的水平位置，取值同justify-items
  • align-self 指定单个项目在单元格中的垂直位置，取值同align-items
  • place-self align-self和justify-self属性的简写形式，用法同place-items

• 喜欢的话就点赞关注吧