前言
在前端布局领域,响应式设计一直是核心需求。过去我们依赖 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
收藏

