栅格系统
栅格系统是网页与界面设计中把页面横向划分为若干等分列、列间留出固定间距的布局方法，用来统一元素的位置、对齐和留白。
什么意思
5 个义项- 栅格系统是页面布局的一套参照规则，它把设计区域横向切成若干等分，让内容按列对齐。列之间留出的空隙叫槽，页面两侧留出的空白叫页边距。
- 它是前端实现响应式布局的常见手段。框架用容器、行、列这组结构加 CSS 类，按屏幕宽度切换每行放几列，从而适配手机、平板和桌面。
- 列数并不固定。Ant Design 采用 24 等分，Bootstrap 和 Layui 采用 12 等分，同一设计区域内还可以按业务再做 2 等分、3 等分、4 等分等组合。
- 栅格系统按用途可分为设计稿里的视觉网格与代码里的布局系统两层，二者规则一致但载体不同，一套栅格通常同时服务设计和开发两端。
- 栅格系统也常被当作团队协作规范：提前定好列数、槽宽、断点，能让不同设计师和开发者输出的间距保持统一，减少重复决策。
什么语气
中性、专业术语口吻，用于设计评审、需求文档和技术交流，不带褒贬和情绪色彩。
用在哪儿
- 设计师在评审会上说页面间距不统一，同事会建议先定一套栅格系统再出稿。
- 前端在实现响应式页面时，用框架的栅格类控制不同屏幕下每行显示几列。
- 产品经理写后台管理系统需求，要求列表页和详情页遵循同一套栅格规范。
- 面试或新人培训中被问到 12 栅格和 24 栅格有什么区别。
- 和外部团队合作时，需要先确认双方用哪套栅格基准，避免设计稿和实现效果对不上。
这样说
这版页面左边那栏老是差两像素，我们对一下栅格再改吧。
后台列表页用 24 栅格排的，一列放两块卡片，到了手机上自动变成一列一块。
出稿前先把栅格定下来，不然每个人间距都不一样。
这个表格页没按栅格走，看着就是跟别的页面对不齐。
例句是编辑写的，只为演示怎么用，不是从谁的帖子里扒下来的。
从哪来的
可查到的官方文档显示，栅格系统是现代界面设计与前端框架的通用术语，对应英文 grid system，Bootstrap、Layui 等框架在其官方文档中分别采用 12 等分，Ant Design 采用 24 等分，说明它并非某个平台独有的说法。本次资料未提供该词中文最早出处或传入时间。
注意什么
别把它和图形学里的「栅格化」搞混，后者指把矢量图形转换成像素点阵，是完全不同的概念。说 12 栅格还是 24 栅格时要先说明用的是哪套框架或哪份规范，否则双方说的列数可能根本不是一回事。这是设计与开发领域的专业术语，不属于网络热词，用在日常闲聊里会显得答非所问；把 8px 基础间距之类某个团队的做法说成行业强制标准，也不准确。
还不确定
- 资料中没有可核验的「栅格系统」中文最早出处或传入时间，无法判定术语起源。
- 列数没有统一标准：Ant Design 为 24 等分，Bootstrap 与 Layui 为 12 等分，槽宽、页边距和断点均以具体设计系统或项目规范为准。
- 人人都是产品经理一文提到的 8px 基础单位和 12／24 栅格适用场景属于作者实践归纳，并非所有框架共同遵循的强制标准。
常见疑问
栅格系统是什么意思
指把页面横向切成若干等分列、列间留固定间距的布局方法，让元素按统一的网格线对齐。设计稿和前端代码里都可以用它来统一间距和位置。
栅格系统怎么用
先确定列数和槽宽，再把内容按占几列来摆放。前端一般用框架的容器、行、列组件或 CSS 类实现，通过断点控制不同屏幕宽度下的列数。
12 栅格和 24 栅格有什么区别
12 栅格把一屏分成 12 列，单格信息量大、分组少时更好排；24 栅格更细，能做出更多不等分组合，适合信息量大、分组多的页面。选哪个看业务和团队规范，没有统一强制标准。
栅格系统和网格系统是同一个东西吗
基本指同一个概念，都是 grid system 的中文叫法。不同团队习惯用词不同，交流时按对方框架文档的说法沟通即可。
栅格系统和栅格化有什么区别
栅格化是把矢量图形转成像素点阵，属于图形处理概念；栅格系统是页面排版布局规则。两者只是中文名相近，含义没有关系。
栅格系统只能用于网页吗
不限于网页，平面版式设计里也有相近的分栏思路。但在中文互联网语境下，它最常出现在网页和后台界面的设计与前端开发中。
不会前端也要懂栅格系统吗
做界面设计的人了解它有帮助，能让间距和尺寸更有规律，也方便和开发对齐。不做设计或开发的人则没有了解的必需。