响应式布局

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

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

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

栅格系统

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

栅格系统的实现

grid_system01

可以看到栅格系统的基本构成

container
rows
columns
gutters 列之间的间隔

Container

grid_system_container

container的目的是给整个栅格设置宽度。container的宽度是100%，但是你可以为特殊巨型设备设置最大宽度。

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

Row

grid_system_row

row 元素的作用是保持所有的列在里面，防止溢出到其他行。需要使用清除浮动来实现这个。

/*-- our cleafix hack -- */
.row:before,
.row:after {
    content: "";
    display: table;
    clear: both;
}

Column

grid_system_column

column是栅格系统里最复杂的部分。在css中有几种方式定位column，然后考虑各种宽度以及诸如响应式设计之类的因素。

column定位

Floats, inline-blocks, display-table, display-flex. 这些都是在CSS中定位列的不同方法。从我的个人经验来看，这些方法中最不易出错且使用最广泛的是“浮动”方法。但是，如果我们的列为空，则我们的浮动列将相互堆叠。为防止这种情况，我们将列的最小高度设置为1px并对其进行浮动。

[class*='col-'] {
    float: left;
    min-height: 1px;
}

column 宽度

要找到一列的宽度，我们要做的就是将列的总数除以容器的宽度。在我们的示例中，容器的宽度为100％，我们需要6列，因此100/6 = 16.66，因此我们的基本列宽度为16.66％。

[class*='col-'] {
    float: left;
    min-height: 1px;
    width: 16.66%;
}

这里我们把每一行分成 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%; }

使用这些列组合时，我们唯一要考虑的是一行中的列总数加起来为6（或任何总列数）。

Column Gutters

grid_system_column_gutter

在使用“border-box”盒模型之前，为百分比宽度元素提供gutter是一个真正的难题。幸运的是，使用“border-box”，我们可以轻松创建gutter。

/*-- setting border box on all elements inside the grid --*/
.grid-container * {
    box-sizing: border-box;
}

[class*='col-'] {
    float: left;
    min-height: 1px;
    width: 16.66%;
    /*-- our gutter --*/
    padding: 12px;
    box-sizing: border-box;
}

最后总结一下

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

/*-- our cleafix hack -- */
.row:before,
.row:after {
    content: "";
    display: table;
    clear: both;
}

[class*='col-'] {
    float: left;
    min-height: 1px;
    width: 16.66%;
    /*-- our gutter -- */
    padding: 12px;
    box-sizing: border-box;
}

.col-1 {
    width: 16.66%;
}

.col-2 {
    width: 33.33%;
}

.col-3 {
    width: 50%;
}

.col-4 {
    width: 66.66%;
}

.col-5 {
    width: 83.33%;
}

.col-6 {
    width: 100%;
}

demo 参考

响应式

调整网格以适应移动布局非常简单。我们要做的就是调整列的宽度。

为简单起见，对于800像素以下的屏幕，我将使列宽加倍。

唯一需要注意的是一些例外，其中行的最后一列挂在末尾。例如.col-2列和.col-5列旁边的.col-1。为了解决这个问题，我们将行中的最后一个.col-2和.col-1设置为100％宽。

@media all and (max-width:800px) {
    .col-1 {
        width: 33.33%;
    }

    .col-2 {
        width: 50%;
    }

    .col-3 {
        width: 83.33%;
    }

    .col-4 {
        width: 100%;
    }

    .col-5 {
        width: 100%;
    }

    .col-6 {
        width: 100%;
    }

    .row .col-2:last-of-type {
        width: 100%;
    }

    .row .col-5~.col-1 {
        width: 100%;
    }
}

对于甚至小于800像素的屏幕，我们将除最小的100％以外的所有列都设为空白。

@media all and (max-width:650px) {
    .col-1 {
        width: 50%;
    }

    .col-2 {
        width: 100%;
    }

    .col-3 {
        width: 100%;
    }

    .col-4 {
        width: 100%;
    }

    .col-5 {
        width: 100%;
    }

    .col-6 {
        width: 100%;
    }
}

这就是全部。现在，我们无需使用框架即可创建自己的自适应网格系统。

请注意，本指南只是创建您自己的系统的起点。它不是框架，也不是完整的解决方案，但是我希望它确实使创建CSS网格的过程变得神秘。

参考

creating-your-own-css-grid-system

Mark24

CSS之栅格系统