前言
在前端布局领域，响应式设计一直是核心需求。过去我们依赖 Flexbox 或 Grid 实现布局，但面对复杂的嵌套布局时，往往需要写大量兼容代码。随着 CSS Subgrid（子网格）特性被主流浏览器全面支持（Chrome 114+、Firefox 110+、Safari 16+），它允许子元素继承父网格的轨道定义，极大简化了复杂布局的开发流程。本文将通过一个电商商品卡片布局案例，带你掌握 CSS Subgrid 的使用方法。
一、需求分析：实现复杂商品卡片布局
我们需要实现一个适配移动端、平板、PC 端的电商商品列表布局，每个商品卡片包含 4 个元素：商品图片、商品名称、价格标签、收藏按钮，要求满足以下条件：
- 所有卡片高度一致，无论商品名称长短；
- 价格标签和收藏按钮始终对齐在卡片底部；
- 不同屏幕尺寸下自动调整卡片数量（移动端 1 列、平板 2 列、PC 端 4 列）；
- 布局代码简洁，避免嵌套过多容器。
若用传统 Grid 实现，需手动定义子元素轨道或通过 JavaScript 计算高度，而 CSS Subgrid 可直接继承父网格轨道，一键解决上述问题。
二、实现步骤（附完整代码）
1. 基础 HTML 结构
首先搭建商品列表的基础结构，外层为容器，内层为商品卡片，每个卡片包含 4 个核心元素：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Subgrid 商品布局</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="product-list">
<div class="product-card">
2025 新款休闲运动鞋 透气轻便
¥399
收藏
夏季纯棉 T 恤 宽松百搭款
¥99
收藏
智能手表 心率监测 超长续航 多功能运动款
¥1299
收藏
无线蓝牙耳机 降噪高清音质
¥599
收藏
