html页面栅格系统,详解CSS中的栅格系统

说到栅格系统(grid system)，你也许见过这样的概念：

像这样，通过固定的格子结构，来进行布局设计。这是一种设计风格，而且一直以来很广泛地应用于网页设计领域。这样的风格清晰、工整，可以让网页具有更友好的浏览体验。

而随着响应式设计(responsive design)的流行，栅格系统开始被赋予新的意义，那就是，一种响应式设计的实现方式。

栅格与响应式

响应式的要点是为同一个页面设计多种布局形态，分别适配不同屏幕尺寸的设备。一般来说，是这样的感觉：

可以看到，一个页面可以拆分成多个区块来理解，而正是这些区块共同构成了这个页面的布局。根据不同的屏幕尺寸情况，调整这些区块的排版，就可以实现响应式设计。另外，屏幕宽度较大的时候，区块倾向于水平分布，而屏幕宽度较小的时候，区块倾向于竖直堆叠。

这些方方正正的区块是不是和栅格系统的格子挺相似？对的，为了让响应式设计更简单易用，于是有了很多称为“栅格”(grid)的样式库。

栅格样式库一般是这样做的：将页面划分为若干等宽的列(column)，然后推荐你通过等宽列来创建响应式的页面区块。

虽然看起来都是这样的思路，但不同的栅格样式库，在做法上却是各有各的点子。下面，本文将介绍几个比较有代表性的栅格样式库，讲述它们的简要原理和用法(正确的打开方式)。

Bootstrap中的栅格

Bootstrap把它的栅格放在CSS这个分类下，并称它为Gird system。默认分为12列。

容器、行与列

要理解Bootstrap中的栅格，最好从掌握正确的使用方法开始。这其中有2个要点。

第1个要点是容器(container)，行(row)和列(column)之间的层级关系。一个正确的写法示例如下：

CSS Code复制内容到剪贴板