Grid System 栅格系统
用户看不见栅格,但会感觉页面稳不稳。栅格把模块放到同一套对齐规则里,避免每个区块各站各的。
关键结构图
浅色列网格作为背景,卡片块贴着列线摆放,标出 margin、gutter、columns。
What
栅格系统是页面背后的隐形尺子,让文字、卡片和按钮站在同一个秩序里。
Grid System 是用列、间距、容器宽度和响应式断点组织页面版面的设计系统。
Structure栅格系统 = 容器 + 列 + 间距 + 断点
When
当页面有多张卡片、多列内容、桌面和手机都要适配时,就需要考虑栅格系统。
How
先确定内容容器,再确定列数、列间距和边距,最后定义不同屏幕下如何折叠或重排。
Examples
一个三列卡片区在桌面端可以并排展示,到手机端应该变成单列,同时保持卡片宽度、间距和阅读顺序稳定。
如果按钮、标题和卡片边缘都各自漂移,用户会觉得页面散。栅格系统像一把隐形尺子,把它们重新对齐。
来源
类型:设计系统 / 技术文档
事实线:网页栅格系统通常用容器、列、间距和响应式断点组织布局,让内容在不同屏幕尺寸下保持对齐和重排规则。
依据:Bootstrap 官方 Grid system 对 containers、rows、columns、gutters 和 breakpoints 的说明,以及 MDN CSS Grid Layout 对二维网格布局的技术文档。
边界:栅格系统提供版面秩序,但不能替代内容优先级、视觉层级和响应式设计判断。
常见误读:不要把栅格理解成固定的视觉牢笼;好的栅格是可适配的布局规则,不是所有元素都机械塞进列里。