用 css grid 实现勋章墙需设容器 display: grid，通过 grid-template-columns 控制列数（如 repeat(4, 1fr) 或 auto-fill/minmax）、gap 设置间距；勋章项统一尺寸、圆角、阴影及 object-fit，支持响应式与交互效果。
用 CSS Grid 实现个人中心勋章墙，核心是把容器设为 display: grid，再通过 grid-template-columns 控制每行显示几个勋章，配合 gap 控制间距，就能轻松实现整齐、响应式、易维护的排列效果。
基础结构：容器 + 勋章子项
HTML 结构保持简洁，一个包裹容器（如 .medal-wall），内部每个勋章用 <div class="medal-item"> 表示：<pre class="brush:php;toolbar:false;"><div class="medal-wall">
<div class="medal-item">@@##@@</div>
<div class="medal-item">@@##@@</div>
<div class="medal-item">@@##@@</div>
<!-- 更多勋章... -->
</div></pre>
<h3>Grid 核心样式：固定列数或自适应列数</h3>
<p>推荐两种常用写法，按需选择：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a>
<p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>
<strong>固定每行 4 个勋章（适合小屏到中屏）</strong>：<br><code>.medal-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
每列均分宽度，4 列等宽，间隙 12px；总宽度超出时自动换行（需配合 width 或父容器约束）。
.medal-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; }每个勋章最小宽 80px，最大占满可用空间（
1fr），浏览器自动计算能放几列；小屏下自动缩为 2–3 列，大屏下撑满 5–6 列，无需媒体查询。勋章卡片样式建议（增强视觉一致性）
每个 .medal-item 推荐统一尺寸和圆角，避免因图片大小不一导致错位：
- 设固定宽高（如
width: 80px; height: 80px;）或使用aspect-ratio: 1/1保持正方形； - 加
border-radius: 12px和轻微阴影box-shadow: 0 2px 6px rgba(0,0,0,0.08)； - 图片用
object-fit: contain居中展示，防止拉伸变形； - 可选：hover 时轻微上浮
transform: translateY(-3px)增加交互感。
进阶技巧：空位占位 / 加载占位 / 特殊勋章突出
实际业务中常遇到“未获得勋章”或“正在加载”状态，可用 Grid 灵活处理：
- 空位占位：插入
<div class="medal-item placeholder"></div>，CSS 中设灰色背景+虚线边框，保持网格结构完整； - 首枚勋章高亮：用
.medal-item:first-child { transform: scale(1.1); z-index: 2; }稍微放大并置顶； - 勋章带角标（如“NEW”）：在勋章元素内加
<span class="badge">NEW</span>，用绝对定位右上角，不影响 Grid 流式布局。
