网格布局中的关键字

CSS

repeat()

repeat()接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。

1. 实例:

grid-template-columns: repeat(2, 100px 20px 80px);

1.1. auto-fill关键字

1. 适用范围:

1.1. 场景

• 有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
  • 注: 对于inline grid, 这个会被判断成剩余空间为0, 所以就只能填充一个轨道

2. 实例:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

上面代码表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。

auto关键字

• 让浏览器在剩余空间中自动取一个尽可能大的长度
• 多个auto关键字就平分剩下的空间

注意:

• 对于内联的网格容器, 并不会撑满容器, 只会撑起尽可能小的空间
  • 示例:

1. 实例

grid-template-columns: 100px auto 100px;

fr单位⭐

fraction 的缩写，意为”剩余空间的片段”

1. 梗概

表示该元素占用剩余空间的比例

2. 注意:

• 剩下的空间最小为1fr
  • 如果某个元素占用了0.3fr, 则不会完全占用剩余空间
• 同样不会撑起网格容器的尺寸

3. 实例:

3.1. 之一

grid-template-columns: 100px 2fr 1fr;

剩余空间为容器宽度-100px 把剩余空间等分乘3份, 第二列占两份, 第三列占一份

3.2. 之一

grid-template-columns: 100px 0.3fr 0.5fr;

把剩余空间等分为一份, 第二列占0.3份, 第三列占0.5份, 还剩0.2份空间没有用到

minmax()关键字

1. 适用范围

1.1. 场景

• 常搭配auto-fill一起使用: repeat(auto-fill,minmax(最小值,最大值))

2. 梗概:

提供一个长度的闭区间, 然后尽可能大的取一个值, 自动填充到父容器中

• 第一个参数为最小值, 第二个参数为最大值

3. 实例

grid-template-columns: 100px minmax(100px,300px)

用100px到300px取一个值, 填充到剩余空间中, 如果剩余空间不够100px, 则把父容器撑开也要填充进去

方括号表示网格线名称

1. 实例

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [名称1 名称2];
}

• 一条网格线可以指定多个名称

2. 说明

• 网格线的名字会被区域命名所覆盖