那个让我重新思考布局的下午
2022年夏天，设计部丢给我一个官网改版的设计稿。
说实话，看第一眼的时候我是兴奋的——不对称网格、卡片重叠、文字环绕图片、对角线排列……这完全是杂志级别的排版，不再是那些千篇一律的“左边图片右边文字”的营销套餐。
但兴奋只持续了五分钟。
当我打开Chrome DevTools，盯着那个需求开始思考实现方案时，冷汗就下来了：用浮动？不可能。用Flex？一维的它面对这种二维复杂布局会直接崩溃。用绝对定位加JS计算？能跑，但维护起来就是一场噩梦。
团队里另一个前端说：“要不我们直接用老办法，把每个模块都独立成一个组件，内部用Flex，外部的整体布局我们用……嗯……‘精心计算’的百分比。”
我说：“那响应式怎么办？手机版这个布局要完全重排，你难道写三套完全不同结构的HTML？”
他沉默了。
我依稀记得那天晚上我加班到11点，没有写一行代码，而是把 Rachel Andrew 的 Grid 教程从头到尾刷了一遍。凌晨2点，我关掉电脑，心里只有一个念头：Grid 不是 Flex 的替代品，它是我以前根本想象不到的新武器。
后来的事情你可能猜到了：我用 Grid 实现了那份设计稿，比预估时间还提前了两天，而且代码干净得像刚整理过的书房——没有魔法数字、没有负margin、没有多余的嵌套容器。
今天这篇文章，我想把这个过程、以及之后一年里用 Grid 积累的所有心得，用我能写出的“最有人味”的方式分享给你。
