必须用auto-fill而非auto-fit，因为瀑布流需预留列槽位以适配不等高图片；grid-auto-rows应设为minmax(100px, auto)防塌陷又允内容撑开；图片须加display: block消除基线空白；小屏需降minmax最小值并缩gap。

grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) 是能跑起来的最小可行配置，但直接照抄会出列数跳变、图片错位、小屏挤成一列等问题——关键不在“怎么写”，而在“为什么这么写”。

为什么必须用 auto-fill 而不是 auto-fit

现象：刚加载几项时只显示 1 列，滚动后突然变成 3 列；或者空数据时整个网格塌成一条线。

• auto-fit 会把没内容的列轨道完全收缩掉，浏览器实际渲染列数小于你预期的“槽位数”
• auto-fill 强制保留所有可能列的占位，哪怕某列暂时为空——这对瀑布流至关重要，因为图片高度不一，浏览器需要预留列槽，才能把后续高卡片塞进合适位置
• 别被“fit 更智能”误导：在瀑布流场景里，“填满可用空间”反而是 bug 源头

grid-auto-rows 必须设为 minmax(100px, auto)

写成 100px 或单独 auto 都会出问题。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 100px 固定行高 → 图片被裁剪、文字换行错乱、卡片底部留大片空白
• 单独 auto → 某些旧版 Chromium（如 Chrome 90 前）会忽略它，导致行高塌陷
• minmax(100px, auto) 是唯一稳妥解：给最小高度兜底防塌陷，又允许内容自然撑开
• 别用 fit-content：它在 Grid 行高里不生效，CSS 规范明确不支持

图片底部多出 4px 空白？不是 Grid 的锅

这是 <img> 默认 vertical-align: baseline 导致的基线对齐问题，和 Grid 无关。

• 必须加 display: block 或 vertical-align: top 到图片上，这是硬要求
• 别用 margin-bottom: -4px 修补：不同字体、字号下这个像素值会变，不可靠
• 也别依赖 line-height: 0：它会影响父容器内其他文本，副作用大
• 顺手加上 width: 100%; height: auto;，确保图片比例协调且不溢出格子

移动端下 minmax(240px, 1fr) 依然生效，这是坑

小屏强行撑出两列，每列窄得只剩图标，用户要滑半天才看到第二张图。

• 必须配 @media (max-width: 768px) 把最小宽度降到 160px，甚至 120px（视卡片内容密度而定）
• 别只调 grid-template-columns：gap 太大在小屏也会挤压内容，建议同步缩到 8px
• 如果卡片含文字，记得检查 font-size 是否在小屏下可读——Grid 不管字体，它只管格子

真正难的不是写出那几行 CSS，而是理解浏览器如何解释 auto-fill 和 minmax() 的组合行为。一个像素的间隙、一次列数跳变，往往源于对这两个关键词底层逻辑的误判。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！