概述`auto-fit` 与 `auto-fill` 在网格轨道不足时自动折行或填充。结合 `minmax(min, max)` 可在不同视口保持项的可读性与对齐。用法/示例.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px } 工程建议选择 `auto-fit` 使空轨道折叠,使用 `auto-fill` 保留轨道占位;依据设计选择策略。与容器查询与多列布局协作,避免极端视口产生过密或过稀布局。验证长词与图片的适配,必要时设置断行与占位。参考与验证MDN:Grid repeat — https://developer.mozilla.org/docs/Web/CSS/repeatweb.dev:Grid responsive — https://web.dev/learn/css/grid

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论
立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部