怎么用CSSGrid实现移动端自适应卡片列表-css教程-PHP中文网

卡片列数随屏幕宽度自动变化的核心是grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，其中auto-fit合并空轨道，minmax设定每列最小280px、最大均分剩余空间，1fr单位确保弹性分配，无需媒体查询即可实现响应式。

怎么用cssgrid实现移动端自适应卡片列表

卡片列数怎么随屏幕宽度自动变化

Grid 的 repeat() 配合 minmax() 和 auto-fit 是最直接的解法，不用媒体查询也能响应式。关键不是写死列数，而是告诉 Grid：“每列至少 280px，最多能塞几列就塞几列”。

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) —— 这是核心，280px 是移动端单卡最小舒适宽度，1fr 确保剩余空间均分
别用 auto-fill，它会预留空列；auto-fit 才会收缩未填充的轨道
如果卡片内容高度不一致，加 grid-auto-rows: minmax(min-content, max-content) 防止错行

卡片内元素在小屏上容易撑破布局怎么办

Grid 只管容器网格线，不管内部溢出。常见问题是图片没约束、标题文字换行异常、按钮跑出边界。

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

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

下载

给卡片设 overflow: hidden，再对图片用 img { width: 100%; height: auto; display: block; }
标题用 word-break: break-word 或 line-clamp（需配合 display: -webkit-box）截断长文本
避免在卡片里用 width: 100vw 或固定 px 宽度值，它们会破坏 Grid 的流式计算

安卓微信 WebView 里 Grid 不生效？

老版本微信内置浏览器（X5 内核）对 Grid 支持极差，auto-fit 直接失效，甚至整个 display: grid 被忽略。

先加 @supports (display: grid) 做特性检测，降级用 Flexbox：比如 display: flex; flex-wrap: wrap; + flex-basis: calc(50% - 8px)
不要依赖 gap——X5 内核不支持，改用 margin 模拟，但注意首尾卡片多出的外边距
用 grid-column: span 2 做跨列时，X5 完全不识别，这类布局得单独抽离或放弃