编写你的专属CSS框架-Grid System

对于任何CSS框架而言网格系统都是最基础的部分。

CSS网格包含的要素

Creating Your Own CSS Grid System这篇文章的配图太棒了，这里就直接用了...

• container 容器
• row 行
• column 列
• gutter 空隙

最普遍的Grid实现方式

就是类似于Bootstrap提供的分栏式栅格系统，通过排方块的方式布局，通常有很多尺寸的块让你挑选，一般提供12栏风格。这些方案通常使用float和inline-block的方式实现，一个典型的6栏式Grid实现方式如文章Creating Your Own CSS Grid System所述，代码如下:

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

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

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

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

.clo-1 {
    width: 16.66%;
}

.col-2 {
    width: 33.33%;
}

.col-3 {
    width: 50%;
}

.col-4 {
    width: 66.664%;
}

.clo-5 {
    width: 83.33%;
}

.clo-6 {
    width: 100%;
}

不过这些实现方式都有一定的缺点，摘录Better, Simpler Grid Systems中的片段。

Using floats requires clearing them which has a whole host of layout issues, most notoriously that clearing an element sometimes forces it below an unrelated part of the page (take this Bootstrap issue for example). In addition, clearing floats usually requires using both before and after pseudo-elements, preventing you from using them for something else.

Inline block layouts must address the problem of white-space between inline-block items, and all of the solutions to that problem are hacky and annoying.

总的来说就是float的clearfix占用了before和after伪类以及会导致清除浮动后的后遗症，inline-block有默认的空白间隙问题。而flexbox就是为布局而生，很多之前CSS无法解决的问题遇到Flexbox迎刃而解。

使用flexbox来完成栅格系统

如果你还不知道Flexbox是什么，可以看阮老师的Flex 布局教程：语法篇和实战篇，语法可能比较枯燥，可以直接看实战，然后看到不知道的回头看语法。布局方面r阮老师参考了Solved by Flexbox ，这篇文章可以用来学习有了Flex之后解决的CSS被诟病的问题。

目前我看到的最好的解决方案就是更棒，更简洁的栅格系统，以及根据这篇文章实现的milligram的栅格系统。这篇文章中作者理想的栅格系统的特性如下:

• 每一行里的每一个栅格默认都是同宽同高。默认自适应。
• 为了足够灵活，能够添加尺寸属性到单独的栅格中。没有添加的，仍然简单地平分剩下的可用空间。
• 支持响应式布局，可以添加媒体查询到栅格中。
• 每一个栅格可以在纯直方向上置顶，置底，剧中。
• 如果让所有栅格拥有一致的大小和对其方式，在容器上添加属性，子元素能够继承，而不需要无意义的重复。
• 栅格能够任意的嵌套。

容器

容器的作用在于限定网格系统的宽度，通常设置为100%，一般会用max-width限定宽度，这里我们用1200p，然后居中，margin auto就好。一个典型的container如下:

.container{
    margin: 0 auto;
    max-width: 120.0rem;
    padding: 0 2.0rem;
    width: 100%;
}

行Row

既然我们用Flexbox实现，那么Row就是Flexbox容器，主轴为垂直方向，起点在上沿。

.row {
    display: flex;
}

列Column

 .column {
        display: block;
        flex: 1;
    }

Flex对齐方式

对齐Flexbox容器中的内容

.row {
    &.row-top      { align-items: flex-start; }
    &.row-middle   { align-items: center; }
    &.row-bottom   { align-items: flex-end; }
    &.row-stretch  { align-items: stretch; }
    &.row-baseline { align-items: baseline; }
    &.row-left     { justify-content: flex-start; }
    &.row-center   { justify-content: center; }
    &.row-right    { justify-content: flex-end; }
    &.row-between  { justify-content: space-between; }
    &.row-around   { justify-content: space-around; }
}

辅助类（栏与偏移)

参考Bootstrap的12栏系统。

.column {
    &.col-1    { flex: 0 0 calc(100% * 1 / 12); }
    &.col-2    { flex: 0 0 calc(100% * 2 / 12); }
    &.col-3    { flex: 0 0 calc(100% * 3 / 12); }
    &.col-4    { flex: 0 0 calc(100% * 4 / 12); }
    &.col-5    { flex: 0 0 calc(100% * 5 / 12); }
    &.col-6    { flex: 0 0 calc(100% * 6 / 12); }
    &.col-7    { flex: 0 0 calc(100% * 7 / 12); }
    &.col-8    { flex: 0 0 calc(100% * 8 / 12); }
    &.col-9    { flex: 0 0 calc(100% * 9 / 12); }
    &.col-10   { flex: 0 0 calc(100% * 10 / 12); }
    &.col-11   { flex: 0 0 calc(100% * 11 / 12); }
}

当然少不了对应的偏移

.column {
    &.col-off-1 {margin-left: calc(100% * 1 / 12); }
    &.col-off-2 {margin-left: calc(100% * 2 / 12); }
    &.col-off-3 {margin-left: calc(100% * 3 / 12); }
    &.col-off-4 {margin-left: calc(100% * 4 / 12); }
    &.col-off-5 {margin-left: calc(100% * 5 / 12); }
    &.col-off-6 {margin-left: calc(100% * 6 / 12); }
    &.col-off-7 {margin-left: calc(100% * 7 / 12); }
    &.col-off-8 {margin-left: calc(100% * 8 / 12); }
    &.col-off-9 {margin-left: calc(100% * 9 / 12); }
    &.col-off-10 {margin-left: calc(100% * 10 / 12); }
    &.col-off-11 {margin-left: calc(100% * 11 / 12); }
}