用 CSS Grid 实现勋章墙需设 display: grid、grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))、gap: 12px；勋章容器用 flex column 居中内容；遮罩须挂 body 下并合理设置 z-index；动态加载后需强制重排。
怎么用 CSS Grid 实现勋章墙的等宽响应式网格
纯 HTML 不足以控制勋章排列，必须靠 CSS Grid 或 Flex 布局。Grid 是最直接的选择，尤其适合固定列数+自动换行的勋章墙。
常见错误是只写 display: grid 却漏掉 grid-template-columns 或 grid-auto-rows，导致勋章堆成一列或溢出容器。
- 用
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))让每块勋章最小 120px、最大均分剩余空间，适配桌面到平板 - 加
gap: 12px控制勋章间距，别依赖 margin——Grid 的 gap 更稳定，不会触发外边距合并问题 - 移动端小屏下，
minmax(80px, 1fr)比硬写repeat(3, 1fr)更可靠，避免勋章被压缩变形或换行错乱
勋章图片和文字怎么对齐才不歪
勋章常含图标 + 标题 + 获得时间，三者垂直居中对齐最容易出问题：图片 baseline 默认对齐文字底部，文字又受 line-height 影响。
典型现象是图标“浮”在文字上方，或者文字下沉压住图标底边。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 给勋章容器设
display: flex和flex-direction: column，再用align-items: center统一水平居中 - 图标用
<img alt="HTML怎么创建社区勋章墙展示_HTML获得勋章网格布局【说明】" >时加vertical-align: middle，或改用background-image避开 inline 元素对齐陷阱 - 文字部分统一用
line-height: 1.4+margin-top: 6px（不用 padding），防止不同字号下高度突变
点击勋章弹出详情层，为什么遮罩盖不住整个页面
遮罩（overlay）失效，90% 是因为父容器有 overflow: hidden 或 transform，导致 position: fixed 被截断。
另一个高频坑是 z-index 层级没理清：勋章容器本身设了 z-index: 10，但遮罩只写了 z-index: 99，却忘了它父级可能有 z-index: 50 且是定位元素。
- 遮罩元素必须挂到
直接子级，避开任何带transform、filter或will-change的祖先 - 用
z-index: 9999不如明确层级关系：比如勋章容器z-index: 10，遮罩用z-index: 1001，详情弹窗用z-index: 1002 - 遮罩背景用
background: rgba(0,0,0,0.7)，别用opacity——后者会让内部文字也变透明
勋章数据动态加载后网格错乱或空白
JS 插入新勋章节点后，Grid 容器没重绘，旧的 grid-column 计算没更新，导致新项挤在第一行或完全不显示。
这不是浏览器 Bug，而是 Grid 在 DOM 变更后不会自动 re-layout，除非你触发重排或显式刷新样式。
- 插入完所有勋章节点后，强制触发一次重排：读取
offsetHeight或getComputedStyle(gridEl).gridTemplateColumns - 别用
innerHTML += ...追加，改用documentFragment批量 append，减少重排次数 - 如果用框架（如 Vue/React），确保 key 值唯一且稳定，避免 Grid 把新勋章当旧节点复用，导致尺寸错乱
Grid 的隐式轨道行为很省事，但也意味着你不能只靠 HTML 结构猜布局结果——每个勋章的宽高、内边距、字体大小，都会影响最终列数和换行点。调试时先关掉所有 transition，不然看不出是布局问题还是动画卡顿。
