112858-172714853802c6.jpg

基础概念

假设你有这样一个需求：

  • 一排展示很多卡片
  • 列表项目
  • 每个卡片最小宽度 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, ...)

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

3. minmax(200px, 1fr)

minmax 也是一个函数，意思是：每列最小200px，最大可以占1fr（剩余空间的平分）
具体来说：

  • 当屏幕宽度很窄时，每列最小宽度是200px，再窄就会换行。
  • 当屏幕宽度变宽，卡片会自动拉伸，每列最大可以占据剩余空间的等分（1fr），让内容填满整行。

4. 综合起来

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

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

让你的网格卡片最小200px，最大自动填满一行，自动适应任何屏幕，布局永远美观！让你完美省去媒体查询，提高效率！！！