css创建12列,pills-简单实用的响应式12列CSS网格系统

pills.css是一款简单实用的响应式12列CSS网格系统。该网格系统的特点是使用人们易于记忆的英文单词来作为设置网格列的class名称。

安装

可以通过bower或npm来安装该CSS网格系统插件。

bower install pills

npm install pills

使用方法

使用该CSS网格额系统需要在页面中引入pills.css文件。

HTML结构

在页面的

中添加下面的标签，设置视口的宽度为设备的宽度。该标签可以确保视口在移动设计或平板电脑上不被缩放。

12列网格系统

pills.css使用.row class类来作为行包裹元素，使用.columns来标注列，由于pills.css是12列的网格系统，如果你需要一行占满12列，相应的class为twelve columns。

下面是一行中有2列，它们分别占4个网格和8个网格。

你也可以在columns中嵌套.row。

要进行列偏移，可以执行下边的代码：

百分比网格系统模式

pills.css还有另外一种百分比网格系统模式。这种模式中一行用.whole表示，1/2行用.half表示。你可以将一行等分为5分，每一份用.one-fifth表示，则.two-fifths表示2/5份，以此类推。也可以将一行等分为4份，每一份用.one-quarter表示，或将一行等分为3份，每一份用.one-third表示。

网格占据一行：

2个网格等分一行：

嵌套结构：

偏移网格：