CSS布局从Flexbox到Grid

以前写页面，像在桌上摆筷子，横平竖直，全靠“手感”

刚入行那会儿，CSS对我来说就是“试出来的”。要三栏布局？左float、右float，中间再加个margin硬塞。写久了，页面像一件补丁外套，风一吹就抖。最经典的一幕是：页面上明明看起来齐整，换个浏览器字号，右侧栏“啪”一声掉到下一行。那时候的我们，信奉“多写一行clear: both就安心”。其实心里清楚：这种布局不是写出来的，是“撞”出来的。直到Flexbox走进日常，大家才像突然有了遥控器，页面元素终于肯“听话”地站成一排。

Flexbox出现后，我们学会了“顺着轴说话”

Flexbox最迷人的地方，是它把方向感还给了开发者。以前要垂直居中，得用position加transform，像做小手术；现在一行display: flex; align-items: center; justify-content: center;，元素就像被磁铁吸住一样稳。我印象最深的是一个后台管理页面的导航栏：图标和文字参差不齐，用inline-block总有莫名其妙的白缝。换成Flexbox后，间隙、对齐、换行，一条轴讲清楚，谁也不占谁的便宜。更妙的是响应式：屏幕窄了就flex-wrap: wrap，宽了就拉开间距，代码干净得像在叠衣服——该折叠折叠，该舒展舒展。

但Flexbox终究是“一根筋”，复杂页面还是会露出马脚

有次做商品卡片瀑布流，左右高度不一，用Flexbox排下去，像排队买票的人里突然插进一个高个子，后面全歪了。想控制“卡片3出现在第2行第1列”？做不到，它只认顺序，不认位置。更头疼的是整体留白：页头、侧边、主区、页脚，想让侧边在特定断点下消失而主区自动填满，得写一堆order和flex-grow，像给拼图强行上胶。这时才意识到，Flexbox解决的是“在一条线上怎么排”，而不是“在整个面上怎么摆”。我们开始怀念表格时代的“格子感”，只是再也不想回到table标签的年代。

Grid登场，把页面当成一张可以“下定义”的棋盘

第一次用display: grid时，有种在墙上钉画框的感觉。先画线，再填内容。grid-template-columns: 1fr 2fr 1fr; grid-template-rows: auto 1fr auto;，三句话，大体骨架就立住了。最爽的是命名：grid-template-areas: "hd hd hd" "sb main main" "ft ft ft";，读起来像户型图，代码像在和设计师用同一种语言说话。我在一个项目里用Grid重构首页：顶部通栏、左侧筛选、中间商品、右侧推荐。断点一变，grid-template-areas直接重排，元素像搬家的箱子，编号不变，位置自改。更重要的是，间距终于统一了：gap一出，margin的“吵架”历史翻篇了。

两种布局不是谁取代谁，而是分工更清楚了

写到现在，反而更少纠结“该用哪个”。列表、工具栏、表单行——Flexbox依然是第一选择，因为它在意的是“内部关系”；页面骨架、杂志式排版、复杂仪表盘，Grid出手更稳，因为它在意的是“整体结构”。有时候它们还会联手：Grid负责把大区切块，Flexbox负责把按钮排成一行。像做菜，Grid是摆盘，Flexbox是调味。浏览器支持不再是借口，移动端和桌面端都能稳稳跑下来。反而是团队协作变简单了：新人看grid-area的名字，比看一串浮动和清除更容易理解页面意图。

写到最后，布局其实是给内容找“合适的距离”

CSS这些年，最动人的变化不是特效多炫酷，而是我们越来越愿意把控制权交给布局模型本身，而不是死死捏在手里的像素和绝对定位。从Flexbox到Grid，像从“边走边看”到“先画地图再出发”。前者让我们学会顺着元素的天性去排，后者让我们敢于对页面说出“我想要这样”。其实布局没有标准答案，只有更适合当下的选择。下一次打开空白文件时，不妨先问自己一句：今天这一页，想按顺序走，还是按网格住？想清楚这一点，代码会比你想象的更听话。