必须定义grid-template-columns和grid-template-rows才能生成真实网格线；仅display: grid不创建任何轨道，子项堆在第一格，grid-column等定位无效因线号不存在。

只写 display: grid 不会出网格——必须同时定义 grid-template-columns 和 grid-template-rows，否则所有子元素堆在左上角第一格里，看着和普通块级流完全一样。

为什么写了 grid-column: 1 / 3 却没效果

根本原因是：容器没声明列线或行线，1 和 3 这些线号压根不存在。浏览器不会自动推断列数，display: grid 只是开启上下文，不生成任何轨道。

• 临时加 border: 1px solid red 到容器上，能快速确认是否有列被渲染出来
• grid-auto-columns 和 grid-auto-rows 是兜底机制，只对超出模板范围的隐式网格生效，不能替代显式定义
• 哪怕只要“内容自适应分列”，也得写 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))

repeat(auto-fit, minmax()) 怎么写才不崩

这是响应式卡片布局的核心写法，但抄错参数就会在小屏下溢出或挤成一条线。

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

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

下载

• minmax(240px, 1fr) 中的 240px 是最小列宽，防 iPhone SE 等窄屏压缩；1fr 是最大可伸缩值，不是像素，而是“剩余空间等分”
• 用 auto-fit 而不是 auto-fill：前者会折叠空轨道，后者保留空白列，视觉上容易出缝隙
• 别混用单位，比如 50% 1fr 或 1fr auto，百分比基准不确定，auto 项可能撑满剩余空间，破坏预期

用 gap 还是 margin 控制间距

用 margin 给网格项加间隔，最后一行/列会多出空白，还可能触发 margin collapse；gap 是容器级属性，只控制项目之间的空隙，更安全。

• gap: 12px 等价于 row-gap: 12px; column-gap: 12px，旧名 grid-gap 已废弃
• 如果某项目用了 position: absolute，它将不参与 gap 计算
• IE 完全不支持 Grid，包括 gap；若必须兼容 IE，别用 Grid —— polyfill 都是伪解

真正卡住人的从来不是语法记不住，而是漏掉 grid-template-columns 或 grid-template-rows 这两条显式定义——它们才是画出网格线的唯一依据。

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