一个让我加班到凌晨三点的需求2019 年的某个深夜，我坐在办公室，盯着屏幕上的四张卡片，已经整整两个小时了。需求是这样的：一个商品列表页，每行显示三张卡片，每张卡片包含图片、标题、价格和购买按钮四种元素。设计师的要求是——所有这些元素必须在跨卡片之间严格对齐。标题的底部要在同一条水平线上，价格要在同一条线上，购买按钮也要在同一条线上。听起来很简单，对吧？但我告诉你，这是一个可以让人怀疑人生的需求。问题出在哪里呢？标题的长短不一。有的标题是一行，有的标题是两行甚至三行。Flex 和 Grid 都做不到让不同卡片内的元素跨容器对齐。我给每个卡片单独设网格，每个卡片自己排得整整齐齐，但卡片之间无法“对话”。最后，我用了最笨的办法：JavaScript 计算每张卡片各个区块的高度，找到最大值，然后给所有卡片统一设置高度。监听窗口大小变化，重新计算，重新设置。代码写了一百多行，跑起来还算正常，直到产品经理说：“我们还要加一个描述字段。”我的心态崩了。那时候我不知道，CSS 早在 2015 年左右的 Grid Level 1 规范讨论中就已经有了一个叫“subgrid”的构想，但因为实现难度太大，被推迟到了 Level 2。当时有人写文章说“subgrid 能解决你的对齐噩梦”，但我一看——没有任何浏览器支持。五年过去了。今天，2026 年，我坐在同一个位置上，再看到类似的需求，只需要十几行 CSS，用 subgrid 一键对齐。那一刻，我不禁在想：这些年我到底浪费了多少时间？