图片在Grid中不居中需设justify-items:center和align-items:center；auto-fit比auto-fill更常用；宽高比错乱应结合aspect-ratio或padding-top技巧；加载闪烁需用grid-auto-rows预留高度。
图片在Grid里不居中？检查 justify-items 和 align-items
Grid容器默认不会自动把子元素（比如 <img alt="HTML怎么用Grid对齐图片_HTML Grid图片对齐布局实战" >）居中，它只按轨道线平铺。要让图片在单元格内水平+垂直居中，得同时设两个属性：justify-items: center（主轴对齐），align-items: stretch 或 center（交叉轴）。注意：align-items: center 会让所有行高一致，如果图片高度差异大，可能造成留白或裁剪。
- 单张图居中：直接在 grid 容器上设
justify-items: center; align-items: center - 多图各自居中但保持原始高度：用
align-items: start+ 给每张<img alt="HTML怎么用Grid对齐图片_HTML Grid图片对齐布局实战" >加align-self: center - 避免意外拉伸：图片默认
align-self: stretch，会撑满行高，加max-height: 100%或object-fit: contain控制显示
grid-template-columns 设 auto-fit 还是 auto-fill？
两者都常用于响应式图片网格，但行为不同：auto-fit 会合并空轨道，auto-fill 保留空轨道占位。实际排图时，auto-fit 更常用——它能让浏览器“挤掉”放不下图片的列，避免出现空白列。
- 推荐写法：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) - 如果用了
auto-fill却发现右侧有大片空白，大概率是容器宽度没被撑开，检查父级是否设置了width或max-width - 注意：IE 不支持
auto-fit/auto-fill，需 fallback 到固定列数或 JS 补充
图片宽高比错乱？别只靠 width: 100%
单纯设 width: 100% 会让图片拉伸变形，尤其当 Grid 轨道宽高比和原图不一致时。真正可控的方式是结合 aspect-ratio（现代浏览器）或 padding-top 技巧（兼容方案）。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 现代写法：给
<img alt="HTML怎么用Grid对齐图片_HTML Grid图片对齐布局实战" >外层加个<div>，设 <code>aspect-ratio: 4/3，再让<img alt="HTML怎么用Grid对齐图片_HTML Grid图片对齐布局实战" >宽高 100% +object-fit: cover - 兼容写法：用伪元素撑开容器高度，再绝对定位图片，但要注意 Grid 的
align-items可能干扰定位 - 常见坑：在
display: grid容器里对<img alt="HTML怎么用Grid对齐图片_HTML Grid图片对齐布局实战" >直接设aspect-ratio无效，必须作用于其父容器（即 grid item） - 最简方案：给 grid 容器设
grid-auto-rows: 200px（或带单位的固定值） - 更灵活方案：用
grid-auto-rows: minmax(200px, auto)，保证最小高度又允许图片撑开 - 慎用
grid-auto-rows: 1fr：会导致所有行等高，图片小的也会被拉高，破坏视觉节奏
Grid 布局下图片加载闪烁或重排？控制 grid-auto-rows
图片异步加载时，如果没有预设行高，Grid 会先按内容高度渲染（比如文字占位），等图片加载完再突然撑高，造成跳动。解决核心是提前分配空间。
立即学习“前端免费学习笔记（深入）”；
Grid 对齐图片不是设几个属性就完事的事——轨道定义、项目对齐、图片自身渲染行为三者必须咬合。最容易漏的是 grid-auto-rows 预留高度和 object-fit 配合，这两个一缺，布局就容易在加载中或缩放时失守。
