用 auto-fit 而非 auto-fill 可避免小屏溢出与留白，配合 minmax(250px, 1fr) 实现列数自适应；图片需设 width: 100%、父容器约束尺寸或 aspect-ratio；gap 比 margin 更可靠；纯 CSS 灯箱无法处理 Esc 关闭与焦点管理，须 JS 补全。
直接用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 就能跑通绝大多数响应式图片画廊，不用媒体查询、不靠 JS，但写错一个词或漏一个细节，小屏就溢出、留白、高度塌陷——问题不在 Grid，而在子项和容器的配合。
grid-template-columns 必须用 auto-fit，不是 auto-fill
auto-fill 会为所有可能列位预留空间，哪怕只有一张图，右侧也会空出两三个格子；auto-fit 则自动丢弃无内容的轨道，让有图的列均分宽度。
- 小屏（375px 宽）下：
minmax(250px, 1fr)→ 只能塞 1 列，auto-fit就只渲染 1 列占满 - 中屏（768px）→ 自动变成 2 列，每列约 360px
- 写成
repeat(auto-fill, minmax(250px, 1fr))，最后一行常只剩一张图，右边大片空白
图片变形/撑破网格？先查这三处
object-fit: cover 不生效，往往不是 CSS 写错了，而是父容器没给明确尺寸约束。
-
<img>必须加width: 100%; height: auto;，否则按原始尺寸渲染，撑破网格 - 若要统一高度，别直接设
height在<img>上，而应设在父容器（如.gallery-item），再配overflow: hidden - 更稳妥方案：父容器加
aspect-ratio: 4/3（现代浏览器），或用padding-top: 75%+position: relative+ 绝对定位图片
gap 比 margin 更可靠，但别和 padding 混用
用 margin 模拟网格间距，容易在首尾、行列交界处漏掉空隙，还触发外边距合并；gap 是 Grid 原生属性，不依赖子元素 display 类型，也不塌陷。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 统一用
gap: 12px即可同时控制行距和列距 - 如果容器本身有
padding: 16px，别为了“视觉等距”把gap改成8px——那会导致图片离边框太近 - 旧版 Safari 不支持
gap，可降级写grid-column-gap: 12px; grid-row-gap: 12px;
灯箱弹出时焦点丢失、Esc 关不掉？纯 CSS 做不到
纯 CSS 灯箱（基于 <input type="checkbox"> + :checked）能解决点击显示/隐藏，但键盘交互必须靠 JS 补全。
-
Esc关闭、Tab焦点管理、图片预加载，都得用 JS 实现 - 灯箱显示时，需手动调用
document.querySelector('.lightbox').focus() - 关闭后，得记录原缩略图元素并触发
returnFocusTo.click()或.focus()，否则焦点悬空 - 纯 CSS 方案里
inset: 0比top/left/right/bottom: 0更简洁，且兼容性更好
真正卡住人的从来不是 Grid 语法，而是图片加载时机、焦点链路断裂、或父容器被 max-width 截断却没意识到——这些地方没显式暴露错误，但一上真机就露馅。
