带新人的时候常被问：布局到底该用什么技术？网上教程五花八门，有人推Grid，有人守着Flex，还有人搬出十年前的浮动方案。网页前端开发的布局这件事，答案其实比想象中简单：Flex加Grid两样够用了，纠结的时间不如拿去练熟。
两者分工一句话说清
Flex管一维，一行或一列里怎么排；Grid管二维，行和列同时定。导航栏、按钮组、页脚的几栏信息，一维的事，Flex最顺手；整页的骨架，头、侧栏、主区、底怎么切格子，二维的事，Grid一步到位。判断用哪个只看一个维度还是两个维度，不需要更多理论。拿不准的时候两个都试一遍，哪个代码更短更直白就用哪个，手感很快就能养出来，别背书，多写两页自然就会了。
实战里的标准搭配
成熟的页面通常是两层结构配合：外层用Grid切出页面骨架，内层的每个格子里用Flex排内容。举几个最常见的例子：
- 产品列表：外层Grid定义一行几个卡片，自动换行，间距统一；卡片内部用Flex让图片、标题、按钮各就各位；
- 响应式导航：大屏Flex横排，小屏收进菜单，几十行代码搞定，十年前这是一整天的活儿；
- 经典三栏页：Grid两行代码定义侧栏和主区，比浮动时代的写法少一半代码，还不留清除浮动的尾巴。
一家做办公家具的客户站点用这套搭配重构后，样式代码少了两成，新页面套骨架的速度明显变快，改版时改一个Grid定义就能调整整站版式。网页前端开发的布局学习曲线也友好：Flex一周能上手，Grid两周能熟练，比当年浮动加定位的组合好学太多，新人少走半年弯路。
兼容的顾虑基本可以放下
总有客户担心新技术老浏览器不支持。现实是Flex支持率早已接近百分之百，Grid在近几年的浏览器上也全覆盖，只有极老的设备有折扣，而那部分访客通过降级方案照顾就够了，不值得为百分之几的边缘环境放弃主流写法。真有特殊环境要求的，降级方案照样能保底，技术和方案都是现成的，缺的只是提前想一步。布局这件事想在前头，后面每一页都在省时间。倒是老项目里的浮动布局值得警惕：清除浮动引发的错位，至今还是老站最常见的问题之一，遇到能换就换。
两条建议：学布局的新人，别再从浮动和定位入门，直接Flex加Grid上手，方向对了练习才有积累；验收供应商新做的站，可以让对方说明布局用的什么方案，答不出条理的，多半代码也是凑出来的。比格网络的项目里布局早已统一到这套标准，维护和改版的效率差异，客户用一次就知道了。
