（auto-fit，auto-fill）两行代码就能适应任何屏幕？

1. auto-fill#

🧱 尽可能多地填充列，即使没有内容也会“占位”

• 会自动创建尽可能多的列轨道（包括空轨道），让网格尽量填满容器。
• 适合需要“列对齐”或“固定网格数”的场景。

2. auto-fit#

🧱 自动适应内容，能合并多余空列，不占位

• 会自动“折叠”没有内容的轨道，让现有的内容尽量拉伸占满空间。
• 适合希望内容自适应填满整行的场景。

下面详细解释这行代码的意思：

1
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

1. grid-template-columns#

• 作用：定义网格容器里有多少列，以及每列的宽度。

2. repeat(auto-fit, ...)#

• repeat 是个重复函数，表示后面的模式会被重复多次。
• auto-fit 是一个特殊值，意思是：自动根据容器宽度，能放下几个就放几个，每列都用后面的规则。
  • 容器宽度足够时，能多放就多放，放不下就自动换行。

3. minmax(200px, 1fr)#

• minmax 也是一个函数，意思是：每列最小200px，最大可以占1fr（剩余空间的平分）
• 具体来说：
  • 当屏幕宽度很窄时，每列最小宽度是200px，再窄就会换行。
  • 当屏幕宽度变宽，卡片会自动拉伸，每列最大可以占据剩余空间的等分（1fr），让内容填满整行。

4. 综合起来#

• 这行代码的意思就是：
  • 网格会自动生成多列，每列最小200px，最大可以平分一行的剩余空间。
  • 屏幕宽了就多显示几列，屏幕窄了就少显示几列，自动换行，自适应各种屏幕！
  • 不需要媒体查询，布局就能灵活响应。

👀直观对比#

假设容器宽度能容纳 10 个 200px 的卡片，但你只放了 5 个卡片：

• <font style="color:rgb(255, 80, 44);background-color:rgb(255, 245, 245);">auto-fill</font> 会保留 10 列宽度，5 个卡片在前五列，后面五列是“空轨道”。
• <font style="color:rgb(255, 80, 44);background-color:rgb(255, 245, 245);">auto-fit</font> 会折叠掉后面五列，让这 5 个卡片拉伸填满整行。

1
<h2>auto-fill</h2>
2
<div class="grid-fill">
3
  <div>item1</div>
4
  <div>item2</div>
5
  <div>item3</div>
6
  <div>item4</div>
7
  <div>item5</div>
8
</div>
9

10
<h2>auto-fit</h2>
11
<div class="grid-fit">
12
  <div>item1</div>
13
  <div>item2</div>
14
  <div>item3</div>
15
  <div>item4</div>
16
  <div>item5</div>
17
</div>

1
.grid-fill {
2
  display: grid;
3
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
4
  gap: 16px;
5
  margin-bottom: 40px;
6
}
7
.grid-fit {
8
  display: grid;
9
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
10
  gap: 16px;
11
}
12
.grid-fill div {
13
  background: #08f700;
14
}
15
.grid-fit div {
16
  background: #f7b500;
17
}
18
.grid-fill div,
19
.grid-fit div {
20
  padding: 24px;
21
  font-size: 18px;
22
  border-radius: 8px;
23
  text-align: center;
24
}

🎯 什么时候用 auto-fill，什么时候用 auto-fit？#

• 希望每行“有多少内容就撑多宽”，用 auto-fit
  适合卡片式布局、相册、响应式按钮等。
• 希望“固定列数/有占位”，用 auto-fill
  比如表格、日历，或者你希望网格始终对齐，即使内容不满。

原文章：https://juejin.cn/post/7497895954101403688

完结！