掘金好文 | 两行代码就能适应任何屏幕？

正文

请到「今天看啥」查看全文

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

3. minmax(200px, 1fr)

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

4. 综合起来

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

总结一句话：

❝

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
让你的网格卡片 「最小 200px，最大自动填满一行」 ，自动适应任何屏幕，布局永远美观！

❞

这里还能填 auto-fill ，和 auto-fit 有啥区别？

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

1.

请到「今天看啥」查看全文