用 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"> 表示：
<div class="medal-wall"> <div class="medal-item"><img src="gold.png" alt="金牌"></div> <div class="medal-item"><img src="silver.png" alt="银牌"></div> <div class="medal-item"><img src="bronze.png" alt="铜牌"></div> <!-- 更多勋章... --> </div>
Grid 核心样式：固定列数或自适应列数
推荐两种常用写法，按需选择：
-
固定每行 4 个勋章（适合小屏到中屏）：
.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 流式布局。
