布局是页面的骨架。框架定下来之后，视觉元素、功能操作和交互流程才有地方落。以下几项是布局里最基础的部分。
几种常见的框架结构
上下布局是最常见的一种：上半部分是导航，下半部分是主内容。它适合导航项不多、页面篇幅较长的网站。左右布局则把全局导航放在左侧，主内容放在右侧，导航可见性更高，页面之间的跳转也更方便。还有一种是「T」型布局，顶部是全站导航，内容区再分成侧栏和主体，多用于文章类网站。
信息量更大的页面会用更复杂的结构。在「T」型基础上增加垂直导航，就得到类似「C」型的三段结构，把常用操作和辅助操作分开，适合功能较多的后台。再增加侧栏，则形成四周都有内容区、中间承载主体的结构，能放下最多的信息，代价是页面容易显得拥挤。
页面层级
页面元素需要有一个明确的层级顺序，从底到顶通常是：背景层、内容层、全局控制层（导航、菜单、侧栏）、蒙版层、弹出层。背景层用于衬托，内容层承载核心信息，控制层负责导航，蒙版和弹出层处理临时任务。层级混乱会带来实际问题，比如弹窗被内容遮挡，或者点击穿透到了下层的按钮上。
栅格系统
栅格把页面横向划分为若干等宽的列，列与列之间留出间距。轻量项目用十二栏就够了，信息分组较多的项目可以用二十四栏进一步细分。列宽、列间距和页面边距加起来等于屏幕宽度，其中列间距一般固定，列宽随窗口变化。
间距同样需要一个规则。由于多数设备的屏幕宽度都能被八整除，用八作为最小单位较为通用：模块宽度和间距都取八的倍数，页面节奏会自然统一。间距单位取得太小，元素会显得细碎；取得太大，跨度又会失控。
适配：响应式还是自适应
响应式是用一套页面适配多种屏幕，自适应则是为不同设备分别准备页面。前者的维护成本低，适合交互较少、功能升级不频繁的展示类网站；后者能针对设备做更细的优化，适合功能复杂、用户交互频繁的场景。
响应式的前提有两个：布局要有规律，页面中的图片要能伸缩。断点是在收缩过程中需要改变内容呈现方式的关键宽度。断点越多，效果越细腻，但维护成本也越高，通常选择几个覆盖主要设备的尺寸即可。
收缩时模块怎么处理
响应式不是等比缩放，而是根据内容的重要性重新安排。常见处理方式有五类：随宽度挤压或拉伸；由左右排列改为上下排列；删减次要内容以保住主线任务；把侧边内容移到页面下方；以及把横向菜单收进一个入口，点击后展开。调整顺序的依据是重要性，越重要的内容越靠上。
布局没有唯一解，判断标准可以简化为一句：把页面缩到最窄的尺寸之后，用户还能不能顺利找到他要做的事。