只用两行 CSS,能让你的内容块自动适应各种屏幕宽度,彻底摆脱复杂的媒体查询! 秘诀就是 CSS Grid 的 auto-fill 和 auto-fit

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

Grid 布局里定义列宽的常用写法,逐个拆解如下:

grid-template-columns

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

repeat(auto-fit, ...)

   repeat 是个重复函数,表示后面的模式会被重复多次。

   auto-fit 是一个特殊值,意思是:自动根据容器宽度,能放下几个就放几个,每列都用后面的规则。

       容器宽度足够时,能多放就多放,放不下就自动换行。

minmax(200px, 1fr)

  minmax 也是一个函数,意思是:每列最小200px,最大可以占1fr(剩余空间的平分)

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

综合来看

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

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


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

1. auto-fill

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

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

2. auto-fit

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

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

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

  • auto-fill 会保留 10 列宽度,5 个卡片在前五列,后面五列是“空轨道”。
  • auto-fit 会折叠掉后面五列,让这 5 个卡片拉伸填满整行
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值