跟建站公司聊方案，对方张口十二栅格、闭口弹性布局，不少老板听得直点头，其实一句没懂。这不丢人，但这两个词直接决定你网站在不同屏幕上的表现，值得花十分钟弄明白，起码听得出对方是不是在唬人。
栅格：把页面切成十二份来摆
把页面宽度想象成一条面包，切成十二等份，每个模块占几份就定多宽：新闻列表占八份，侧栏占四份；到手机上放不下，新闻占十二份独占一行，侧栏挪到下面。这套切法就是栅格系统。它的好处是规矩：所有模块的宽度都有据可查，设计稿和代码对得上，改版时也不会东歪西倒。做响应式网站设计，栅格是布局的骨架，屏幕切换时模块按份数重新分配，这就是布局变化的本质。
弹性：让内容自己找位置
栅格管大结构，弹性布局管细节。一行里放三个按钮，屏幕变窄时按钮怎么处理？固定宽度会溢出，弹性布局让它们按比例压缩、自动换行或者居中分布。再比如卡片列表，宽屏一排四张，平板三张，手机两张，都靠弹性规则自动算。老式布局靠死数字硬定宽度，内容一多就撑破；弹性布局像弹簧，能伸能缩。两种机制配合起来，页面才能在任何宽度上都站得稳。
- 问对方：布局用栅格还是自由定位？答不上来或者含糊的，多半在套模板；
- 要一份多端设计稿：手机端页面是重新排过的，才能看出设计功力；
- 拖窗口测试：把浏览器宽度从最大拖到最小，布局过渡自然流畅的是好活。
懂这两套机制还有个实际用处：后期你想加个模块，能自己判断它在手机上会怎么排，需求描述得清楚，开发返工就少。很多沟通成本，本质上就是双方说的不是一种语言。学会这两个词，谈判桌上你就有了验货的尺子。
不必深究代码，但要会看结果
老板不需要会写一行样式代码，只要记住判断标准：布局模块化、有节奏，各屏幕下都整齐，说明栅格用得对；元素伸缩自然、不溢出不重叠，说明弹性做得好。反面教材也常见：手机上某块内容孤零零缩在角落，或者图片和文字的间距忽大忽小，多半是布局没按规矩来，靠手动硬调的，改一处崩一处。
建议选建站方时把多端效果当面试题，现场拖窗口给对方看，要求解释某个布局怎么实现的，专业团队讲起来头头是道。比格网络做响应式网站设计项目时会附一份布局说明，哪个模块在哪档屏幕怎么排，客户看得明明白白，这种透明度值得你拿来当选型标准。
