制作你自己的栅格系统 CSS

响应式设计

在谈论栅格系统之前，我们先了解一下，响应式设计。简单来说，我们在设计的页面的时候，并不知道我们的页面会在什么设备呈现，为了在不同的设备上有最好的呈现效果，我们需要作出一些响应和调整。

响应式 Web 设计（Responsive Web design）的理念是，页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。

响应式设计有几个比较重要的点，包括：

• viewport：让页面宽度等于设备宽度
• 流式布局：百分比和浮动
• @media：断点

栅格系统

为了能够更好的使用响应式设计，栅格系统应运而生。通过栅格系统，可以在切分的网格里按顺序叠加不同的宽度，并且易于管理。这样做的好处是显而易见的：

• 提高生产力，通过在网格的划分，元素更容易堆放而且在跨浏览器上面具有一致性，使我们可以专心的注意布局而不是兼容上。
• 具有灵活性，无论是什么样的布局，都可以拆分到粒度为一个网格的大小。
• 支持响应式设计，栅格系统本身能很好的和响应式设计结合在一起，或者说，我们的栅格系统是基于响应式设计的。

栅格系统的实现

grid-elements.png

Container

container.png

一个用于摆放栅格系统的容器。通常我们希望这个容器占满整个整个页面，除非显示设备特别大，这个时候定一个最大宽度，则

.container {
    width: 100%;
    max-width : 1200px; 
}

Row

row.png

用于防止里面的列（ column ）溢出到其他的行。通常会需要清除浮动，因为我们是通过浮动来制作栅格系统的。

.row:before,
.row:after {
    content: "";
    display: table;
    clear: both;
}

Column

column.png

栅格系统的核心，规定了列的宽度，位置和间隔。而在此之前，我们需要规定所有的盒子模型为 border-box 类型，这样做的原因是避免繁琐的计算和更简单的分列。（当然你也可以让页面上所有的盒子模型都设置为 border-box。）

.container * { 
    box-sizing: border-box
}

这里我们把每一行分成 6 列，通过将其设置为浮动且百分比，能够很好的制作响应式页面。

[class *= 'col-'] {
    float: left;
    min-height: 1px;
    padding: 12px; /* 设置间距 */
}
.col-1 { width: 16.66%; } 
.col-2 { width: 33.33%; } 
.col-3 { width: 50%; } 
.col-4 { width: 66.664%; } 
.col-5 { width: 83.33%; } 
.col-6 { width: 100%; }

Responsive

到此为止，我们的栅格系统已经设置的差不多了，为了支持响应式设计，参考 boostrap 的设置，我们可以给不同列设置不同的断点，这里以实现 md 和 sm 两种界限为例子：

@media all and (min-width: 769px) {
    .col-md-1 { width: 16.66%; } 
    .col-md-2 { width: 33.33%; } 
    .col-md-3 { width: 50%; } 
    .col-md-4 { width: 66.664%; } 
    .col-md-5 { width: 83.33%; } 
    .col-md-6 { width: 100%; }
}

@media all and (max-width: 768px) {
    .col-sm-1 { width: 16.66%; } 
    .col-sm-2 { width: 33.33%; } 
    .col-sm-3 { width: 50%; } 
    .col-sm-4 { width: 66.664%; } 
    .col-sm-5 { width: 83.33%; } 
    .col-sm-6 { width: 100%; }
}

参考

• 什么是响应式 Web 设计
• understanding css grid systems
• creating your own css grid system
• Bootstrap css