栅格系统概述

栅格系统（Grid Systems），即网格系统，它是一种清晰、工整的设计风格，用固定的格子进行网页布局。栅格系统最早应用于印刷媒体上，如图1所示。

图1 印刷媒体的栅格系统

从图1可以看出，在印刷媒体中，一个印刷版面上划分了若干个格子。有了这些格子以后，再进行排版的时候就非常方便。

后来，栅格系统被应用于网页布局中。随着响应式设计的普及，栅格系统开始被赋予了新的含义，即一种响应式设计的实现方式，如图2所示。

图2 响应式栅格系统

图2中可以看出，使用响应式栅格系统进行页面布局时，可以让一个网页在不同大小的屏幕上，呈现出不同的结构。例如，在小屏幕设备上有某些模块将按照不同的方式排列或者被隐藏。