兰亭妙微ui设计公司分享：栅格系统一直是不少设计师的困惑点，无论是日常落地使用，还是理解它在产品体系中的价值，都存在诸多疑问。本文结合实际业务场景，讲解栅格的落地用法，以及各类网页布局之间的核心差异。
上期回顾：B 端设计指南：栅格的定义和使用方法 在 B 端页面设计中，很多人都会对栅格的用法感到疑惑，欢迎阅读往期文章系统了解。
聊栅格的本质，其实就是在梳理网页的布局逻辑，理清不同布局方案的区别。
网页布局，核心是解决浏览器窗口宽度与页面内容之间的适配关系。 用户会用不同尺寸的浏览器窗口访问系统，页面内容该如何响应窗口变化？主流分为四类：固定布局、流式布局、自适应布局、响应式布局。
固定布局是最简单的布局模式，页面内容尺寸完全写死，全部以px像素作为单位，页面元素不会跟随浏览器窗口缩放而改变大小。
窗口尺寸与页面内容存在两种表现：
✅ 优势：逻辑简单，设计还原成本低； ❌ 劣势：完全不做多尺寸兼容，小窗口体验较差。
适用场景：老旧政务系统、网页登录注册页等对多端适配要求很低的项目。
流式布局是基础的弹性适配方案。可以把页面内容比作 “水”，外层容器卡片就是 “杯子”；文字、图标等内容像水一样，会跟随容器（杯子）的宽度自动延展收缩，容器高度保持固定，仅宽度动态变化。
借助栅格系统定义容器的最大、最小宽度，就可以实现基础适配：
…截断，避免内容错乱。✅ 优势：开发成本低，可实现小范围屏幕尺寸适配； ❌ 劣势：屏幕尺寸跨度很大时适配效果有限。
适用场景：博客、资讯类网页，适合变化区间不大的 PC 端场景。
自适应布局会针对差异较大的屏幕，产出多套独立设计稿与代码，每套方案对应一类设备尺寸。浏览器通过屏幕断点（媒体查询@media）或者设备 UA 识别当前设备，切换对应的页面方案。
通俗来讲：桌面端、平板、移动端分别独立设计，各自一套代码。典型案例如语雀：区分桌面、移动端、小程序三套独立界面。
屏幕断点，即 CSS 的媒体查询@media，以屏幕宽度作为判断依据，切换不同布局规则。 除显示器原生物理分辨率断点，B 端 ISV 项目还会产生设计断点：例如钉钉弹窗容器 1024px、企业微信 980px、飞书 1280px，要针对这些业务特殊尺寸做布局处理。
提示：自适应不等于抛弃栅格，不同设备页面内部，依旧会使用流式布局、栅格来完成页面排版；断点只是切换整套页面，并非最终目的，如果业务场景不需要，无需强行设置断点。
✅ 优势：不同设备体验可以做到高度定制； ❌ 劣势：多套设计稿、多套代码，设计与开发维护成本高。
适用场景：需要严格区分 PC / 移动端，业务复杂度高的产品。
响应式布局在 2015 年由 Google 大力推广，初衷解决安卓设备屏幕碎片化的适配难题，YouTube 就是典型代表。 它是流式布局 + 自适应的结合体：同一套代码，适配桌面、平板、手机各类设备。在不同屏幕断点下，动态调整栅格列数、水槽宽度、页面边距，完成布局的平滑切换，不需要多套独立页面。
以 Ant Design Pro 的 B 端响应式规则举例：
表格
| 屏幕断点 | 列数 | 水槽宽度 | 页边距 | 内容宽度 |
|---|---|---|---|---|
| 576px | 4 | 24 | 24 | 528 |
| 768px | 8 | 24 | 24 | 640 |
| 992px | 12 | 24 | 24 | 688 |
| 1200px | 12 | 24 | 24 | 896 |
策略采用向下兼容，随着屏幕缩小，减少栅格列数，压缩内容区域。
✅ 优势：一套代码覆盖多设备，维护成本可控； ❌ 劣势：设计复杂度高，需要完整梳理全尺寸下页面组件、表格、卡片的表现。
适用场景：官网、中台工作台，需要兼顾 PC 与移动端访问的 B 端产品。
布局是页面的适配策略，栅格是实现布局的工具。 栅格用来定义流式布局的伸缩比例，也定义响应式布局在各个断点下的排版规则。
⚠️ B 端不要 “为了栅格而栅格”： 并不是所有页面都必须使用栅格。工作台、官网首页是栅格的高频使用场景；而表单、复杂业务详情页，往往很难套用标准栅格。
B 端小屏幕下有一个很实用的优化技巧：浏览器窗口缩小时，自动收起侧边导航，释放更多空间留给业务内容，显著提升窄屏的使用体验。
表格
| 布局类型 | 代码套数 | 适配逻辑 | 核心特征 |
|---|---|---|---|
| 固定布局 | 1 套 | 完全固定 px | 缩放窗口会出现滚动条 / 居中留白，无弹性变化 |
| 流式布局 | 1 套 | 容器百分比伸缩 | 内容跟随容器宽窄流动，适合小范围尺寸变化 |
| 自适应布局 | 多套 | 断点切换整套页面 | 不同设备独立页面，维护成本高 |
| 响应式布局 | 1 套 | 断点改变栅格参数 | 一套代码，动态调整列数、边距适配全设备 |
