【CSS】Grid布局3

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

---

Grid布局3

接上文

03. 属性值设置

（1）fr

• fr表示分数、或者说份数，占剩余空间的多少份

这里以划分列为例子，划分行同理

• 比如：

  .father {
      display: grid;
      width: 400px;
      grid-template-columns: 100px 1fr 2fr 3fr;
      grid-template-rows: 100px;
  }
  

  • 表示将表格划分为4列，第一列占100px
  • 剩余三列共占剩余空间300px
    • 分别占300px的1/6、2/6、3/6份

• 如果fr是小数，即

  .father {
      display: grid;
      width: 400px;
      grid-template-columns: 100px 0.1fr 0.2fr 0.3fr;
      grid-template-rows: 100px;
  }
  

  • 那么这里表示将表格划分为4列，第一列占100px，
  • 剩余三列占剩余空间300px的0.1+0.2+0.3 = 0.6份
    • 即剩余三列共占180px，分别占180px的1/6、2/6、3/6份

（2）auto

• auto表示自动、自适应剩余空间，平均分配剩余空间

  .father {
      display: grid;
      width: 400px;
      grid-template-columns: 100px 200px auto auto;
      grid-template-rows: 100px;
  }
  

  

• 特别的，如果auto与fr合用，则auto为元素内容宽度，然后剩余的空间则按照fr的规则，按份数分配

  .father {
      display: grid;
      width: 400px;
      grid-template-columns: 100px 1fr auto 2fr;
      grid-template-rows: 100px;
  }
  
  

  注：

  • 如果 fr 所占的份数相加小于1，比如 grid-template-columns: 100px 0.1fr auto 0.2fr;

  • 那么 fr所标识的宽度实际所占为： (300px - 第三列元素内容宽度) * ( 0.1 + 0.2)

  • 将fr分配完后， auto 标识的宽度则为剩余空间的宽度

  下图标识了这两种情况

  

  

（3）repeat

• repeat语法：repeat(n, size)

  • 表示重复n次，即n列，n可以是下面的两种属性auto-fill、auto-fit

  • 每列宽度为size，size可以是上面的两种属性fr、auto

    .father {
        display: grid;
        width: 400px;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 100px;
    }
    

    

（4）auto-fill

• auto-fill关键字，在不确定有几列的情况下使用，可以自动填充列，会在不溢出的情况下，尽可能多的创建单元格

  .father {
      display: grid
      width: 400px; /* 300px */
      grid-template-columns: repeat(auto-fill, 100px);
      grid-template-rows: 100px;
  }
  

  

（5）auto-fit

• auto-fit关键词与auto-fill类似，它也可以自动填充列，并尽可能多的创建单元格，而重复的空轨道会堆叠在一起（合并）

  .father1 {
      grid-template-columns: repeat(auto-fill, 100px);
  }
  .father2 {
      grid-template-columns: repeat(auto-fit, 100px);
  }
  

  

  

  从图中可以看出，auto-fit的隐式网格被折叠在一起了，auto-fill的隐式网格会正常显示

（6）minmax

• minmax()函数

  • 接受两个参数，可以给单元格设置最大最小宽度（高度）

  .father {
      display: grid;
      width: 400px;
      grid-template-columns: 100px 100px minmax(100px, 300px);
      grid-template-rows: 100px;
  }
  
  

  表示第三列，最小宽度为100px，最大宽度为300px

  在这个范围内的值都可以

  

---