用css grid实现积分商城礼品卡片网格，核心是display: grid配合auto-fit、minmax和响应式断点，兼顾移动端适配与视觉一致性。

在 H5 页面中用 CSS Grid 实现积分商城礼品卡片网格，核心是用 display: grid 控制列数、间距和响应式断点，兼顾移动端适配与视觉一致性。

基础网格结构：固定列数 + 自动换行

给卡片容器（如 .gift-grid）设置 Grid 布局，推荐用 grid-template-columns 配合 repeat() 和 auto-fit，让列数随容器宽度自动调整：

.gift-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding: 12px;
}

说明：
• minmax(140px, 1fr) 表示每列最小 140px（保障卡片内容可读），最大均分剩余空间；
• auto-fit 会自动合并空余轨道，比 auto-fill 更适合卡片类布局；
• gap 统一控制卡片间距，避免用 margin 造成外边距塌陷问题。

卡片样式统一：固定宽高比 + 内容居中

礼品卡片建议采用等宽等高设计，提升视觉整齐度。可用 aspect-ratio（现代浏览器支持）或 padding-bottom 技巧兼容老版本：

• 现代写法（推荐）：

  .gift-card {
    aspect-ratio: 3 / 4; /* 宽高比 3:4 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  }

• 兼容写法（需包裹内层）：

  .gift-card {
    position: relative;
  }
  .gift-card::before {
    content: '';
    display: block;
    padding-bottom: 133%; /* 3:4 → 4/3 ≈ 133% */
  }
  .gift-card > * {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
  }

响应式断点：按屏幕宽度调整列数

对中大屏做微调，避免单行卡片过多导致信息过载：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 手机（≤375px）：1 列
• 小平板（376–767px）：2 列
• 大平板及以上（≥768px）：3 列（或 4 列，视设计而定）

.gift-grid {
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 376px) {
  .gift-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  .gift-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

注意：断点数值需结合实际设计稿和测试设备调整，不建议死守标准值。

加载与空状态处理

真实项目中常需处理「无数据」或「加载中」状态，建议在 Grid 容器内直接插入占位元素：

• 加载中：用 3–4 个 .gift-card.skeleton 卡片，配合背景动画（如 linear-gradient + animation）模拟骨架屏；
• 空状态：单独一个 .empty-state 元素，设 grid-column: 1 / -1 跨满整行，居中显示图标和提示语。

这样既保持 Grid 结构稳定，又避免因动态渲染导致布局抖动。