语义化HTML用和构建商品结构，CSS Grid实现自适应网格布局，通过minmax(280px,1fr)自动调节列数，配合gap控制间距、line-clamp限制标题行数、object-fit规范图片，辅以媒体查询优化小屏体验。
用 HTML + CSS 搭建商品卡片网格，核心是语义化结构 + 灵活布局。不需要框架也能实现响应式、对齐整齐、可扩展的卡片列表。
1. 用语义化 HTML 组织商品结构
每个商品用 <article></article> 包裹，体现独立内容单元；整体列表用 <section></section> 或 <main></main> 包裹，比单纯用 <div> 更清晰：<font size="2"><pre class='brush:php;toolbar:false;'><section class="product-grid">
<article class="product-card">
<img src="shoe1.jpg" alt="运动鞋 A" class="product-img">
<h3 class="product-title">运动鞋 A</h3>
<p class="product-price">¥299</p>
<button class="add-to-cart">加入购物车</button>
</article>
<article class="product-card">
<img src="shoe2.jpg" alt="休闲鞋 B" class="product-img">
<h3 class="product-title">休闲鞋 B</h3>
<p class="product-price">¥189</p>
<button class="add-to-cart">加入购物车</button>
</article>
<!-- 更多 article... -->
</section></pre></font><h3>2. 用 CSS Grid 实现自适应卡片网格</h3>
<p>在 <code>.product-grid 上启用 Grid，用 repeat(auto-fill, minmax(...)) 让列数随容器宽度自动调整：
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
padding: 16px;
}
<p>.product-card {
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
background: #fff;
transition: box-shadow 0.2s;
}</p><p>.product-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}</code></p>- 280px 是单张卡片最小宽度（适配移动端）
- 1fr 表示剩余空间均分，保证等宽填满整行
- gap 替代 margin，统一控制卡片间距，更可靠
3. 卡片内部保持结构一致与高度统一
图片、标题、价格、按钮需视觉对齐。常见问题是标题长短不一导致卡片高度参差——可用以下方式约束：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 给
.product-title设固定行数+省略：display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; - 图片用
object-fit: cover保持比例并裁剪填充 - 价格和按钮放在底部固定区域，用 flex 垂直对齐
4. 简单响应式增强（可选但推荐）
在小屏下让网格退化为单列，同时微调间距和字体：
<pre class="brush:php;toolbar:false;">@media (max-width: 768px) {
.product-grid {
grid-template-columns: 1fr;
gap: 16px;
padding: 12px;
}
.product-title {
font-size: 1rem;
}
.product-price {
font-size: 1.125rem;
}
}不复杂但容易忽略：记得给图片加 alt 属性，保障可访问性；所有交互元素（如按钮）保持足够点击热区（建议 ≥44×44px）。
