用css grid实现h5足迹商品按日期归档布局：每个日期为，内嵌.product-grid设grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))、gap: 8px；日期标题加粗、底纹、左线增强辨识；兼容性上现代webview原生支持，极老内核可降级为flex-wrap。
在 H5 页面中用 CSS Grid 实现“足迹商品按日期归档”的网格布局，核心是：**先按日期分组数据，再为每个日期块构建独立 Grid 容器，控制列数、间距和响应式行为**。不需要 JS 框架，纯 CSS + 合理的 HTML 结构即可完成。
结构设计：日期为节，商品为子项
HTML 应体现语义化分层：每个日期是一个 <section></section> 或 <article></article>，内部用 <ul></ul> 或 <div class="grid"> 包裹商品卡片。例如：
<font size="2">
<pre class="brush:php;toolbar:false;"><section class="date-group"><h4 class="date-title">2024-06-15</h4>
<div class="product-grid">
<div class="product-card">…</div>
<div class="product-card">…</div>
</div>
</section><section class="date-group"><h4 class="date-title">2024-06-14</h4>
<div class="product-grid">
<div class="product-card">…</div>
</div>
</section></pre>
</font>
<h3>CSS Grid 样式：固定列数 + 自适应间距</h3>
<p>对每个 <code>.product-grid 设置 Grid 布局，推荐使用 grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))，兼顾小屏紧凑与大屏延展：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 120px 是单个商品卡片最小宽度（含图片、标题、价格区域），适配 H5 常见 375px–414px 屏宽，一行可显示 2–3 个
-
gap: 8px控制商品间空白，避免拥挤；日期标题用margin-bottom: 12px隔开区块 - 禁用
grid-auto-flow: column，保持从左到右、从上到下自然流
日期标题与视觉区分
让归档更清晰，日期标题需有足够辨识度：
- 字体加粗 + 微微增大字号（如
font-size: 14px; font-weight: 600） - 添加浅色底纹或左右细线，例如
padding: 6px 12px; background: #f9f9f9; border-left: 2px solid #007aff; - 整体
.date-group加margin-top: 16px（首项除外），形成呼吸感
兼容性与降级处理
H5 环境基本支持 Grid（iOS Safari 10.3+、Android Chrome 57+），但需注意：
- 不加前缀即可，现代 WebView 均已原生支持
display: grid - 若需兼容极老内核（如 UC 11），可对
.product-grid增加display: flex; flex-wrap: wrap;作为 fallback - 商品卡片统一设
width: 100%或flex: 1（在 flex fallback 下）保证等宽
