基础概念

假设你有这样一个需求：一排展示很多卡片，每个卡片最小宽度 200px，剩余空间平均分配，屏幕变窄时自动换行

只需在父元素加两行 CSS 就能实现：

/* 父元素 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* 子元素 */
.item {
  height: 200px;
  background-color: rgb(141, 141, 255);
  border-radius: 10px;
}

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

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

这是 CSS Grid 布局里定义列宽的常用写法，逐个拆解如下：

什么鬼？两行代码就能适应任何屏幕？

马上教你用！✨

? 基础概念

假设你有这样一个需求：

• 一排展示很多卡片
• 每个卡片最小宽度 200px，剩余空间平均分配
• 屏幕变窄时自动换行

只需在父元素加两行 CSS 就能实现：

/* 父元素 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* 子元素 */
.item {
  height: 200px;
  background-color: rgb(141, 141, 255);
  border-radius: 10px;
}

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

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

这是 CSS Grid 布局里定义列宽的常用写法，逐个拆解如下：

1. grid-template-columns

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

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

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

3. auto-fit2

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

综合起来

网格会自动生成多列，每列最小 200px，最大可以平分一行的剩余空间。

屏幕宽了就多显示几列，屏幕窄了就少显示几列，自动换行，自适应各种屏幕！

「不需要媒体查询」，布局就能灵活响应。

auto-fill 和 auto-fit 有啥区别？

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

auto-fit：自动适应内容，能合并多余空列，不占位