如何使用CSS Grid布局实现产品卡片的特定定位

1. grid-template-columns：定义网格列的数量与宽度 #

• 基础逻辑：用空格分隔的值列表，每个值对应一列的宽度。比如grid-template-columns: 200px 200px;就是两列固定宽度的网格。
• 产品卡片常用的自适应写法：
  • fr单位：按比例分配容器可用空间。比如做简洁版卡片的“图片+信息”布局，写grid-template-columns: 1fr 2fr;，图片区占1份宽度，信息区占2份，自动适配卡片整体宽度。
  • repeat()函数：快速生成重复列。如果页面要排多个卡片，用repeat(3, 1fr)直接生成3等宽列；响应式场景用repeat(auto-fill, minmax(280px, 1fr))，自动填充尽可能多的列，每列至少280px，空间够时自动扩展。
  • minmax()：限制列宽范围，避免卡片太窄或太宽，比如minmax(250px, 1fr)，适合单个卡片内部的布局控制。
• 示例代码（简洁版卡片内部布局）：

.product-card-simple {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

2. grid-template-rows：定义网格行的数量与高度 #

• 基础逻辑和grid-template-columns一致，值列表对应每行高度。比如grid-template-rows: 100px auto;，第一行固定100px，第二行高度随内容自动调整。
• 产品卡片场景：复杂版卡片需要分标题、描述、操作区，用auto 1fr auto的组合最实用：
  • 第一个auto：标题行高度自适应内容
  • 1fr：描述区占满卡片剩余空间，保证不同内容长度的卡片高度统一
  • 第二个auto：操作按钮区高度自适应
• 示例代码（复杂版卡片内部布局）：

.product-card-complex {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

3. gap（原grid-gap）：控制网格项之间的间距 #

• 用法：gap: 16px统一设置行、列间距；也可以分开写row-gap: 12px; column-gap: 16px;。
• 优势：不用给每个网格项加margin，直接在容器上统一控制，布局更整洁。
• 产品卡片场景：
  • 页面卡片容器：用gap: 24px控制多个卡片之间的间距
  • 单个卡片内部：用gap: 12px控制图片和信息区、标题和描述之间的间距
• 示例代码（多卡片排列容器）：

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

新手易踩的坑 #

• 漏加display: grid;：所有Grid属性只对设置了display: grid的容器生效，别忘给父元素加这行。
• 搞混容器和网格项：grid-template-columns/rows是给网格容器（比如.card-container、.product-card）设置的，网格项是容器的直接子元素（比如img、.info-box）。
• 过度用固定px：优先用fr、minmax这类自适应值，比固定宽度更适配不同屏幕的产品卡片布局。

内容的提问来源于stack exchange，提问作者Dämgharr