更棒，更简洁的栅格系统

现今大部分栅格系统都使用了两种布局方式中的一种：浮动 (float) 或者 內联块 (inline-block)。但是它们的初衷均不是真的用于布局 (layout)，也因此导致了诸多的问题和限制。

使用浮动 (float) 需要清除浮动，因此牵连出了一堆布局问题，最臭名昭著的是清除一个元素的浮动有时会强制它出现在一个不相关的页面部分的下边 (例如 Bootstrap issue )。并且，使用清除浮动通常会同时使用 before 和 after 两个伪元素，导致你不能将该伪元素使用于其他用途。

内联块布局最著名的问题是 内联块之间空白问题, 以及其所有 解决方案 都是 奇技淫巧 和 恼人 的。

Flexbox 布局不仅结局了这些问题，还开启全新可能性的新世界的大门。

Flexbox 栅格系统特性

栅格系统通常有数不清的尺寸选项，但是通常情况你仅仅想要一个两栏或三栏的栅格系统。既然如此，我们为什么一定要把尺寸属性 (sizing classes) 写到每一个格子 (cell) 里？

下列是我对于一个理想的栅格系统的标准。幸运的是，Flexbox 布局满足了大部分特性。

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

基础栅格系统

下面的栅格没有指定特定的宽度，它们自然的平分每一行的空间并撑满每一个行，并且高度默认都是相等的。

独立的尺寸

当你的需求不是等宽栅格的时候，可以添加尺寸属性到特定的栅格中。没有尺寸属性的栅格将简单地继续平分剩下的可用空间。

下边加了 “auto” 标签的栅格没有指定任何尺寸属性。

响应式

响应式栅格系统通过添加媒体查询到栅格元素或栅格容器来实现。当满足媒体查询的条件时，栅格系统就能自动调整。

下边的这些栅格应在低于 48em 时撑满一行，调整你的浏览器来查看效果。

栅格嵌套

栅格可以无限嵌套于另一个栅格中。

对齐特性

置顶对齐栅格

置底对齐栅格

垂直居中栅格

混合垂直对齐

HTML 代码

<div class="Grid">
    <div class="Grid-cell">…</div>
    <div class="Grid-cell">…</div>
    <div class="Grid-cell">…</div>
</div>

CSS 代码

基础栅格系统

.Grid {
    display: flex;
}

.Grid-cell {
    flex: 1;
}

栅格系统修饰属性

/* With gutters */
.Grid--gutters {
    margin: -1em 0 0 -1em;
}
.Grid--gutters > .Grid-cell {
    padding: 1em 0 0 1em;
}

/* Alignment per row */
.Grid--top {
    align-items: flex-start;
}
.Grid--bottom {
    align-items: flex-end;
}
.Grid--center {
    align-items: center;
}

/* Alignment per cell */
.Grid-cell--top {
    align-self: flex-start;
}
.Grid-cell--bottom {
    align-self: flex-end;
}
.Grid-cell--center {
    align-self: center;
}

响应式修饰属性 (移动设备优先)

/* Base classes for all media */
.Grid--fit > .Grid-cell {
    flex: 1;
}
.Grid--full > .Grid-cell {
    flex: 0 0 100%;
}
.Grid--1of2 > .Grid-cell {
    flex: 0 0 50%;
}
.Grid--1of3 > .Grid-cell {
    flex: 0 0 33.3333%;
}
.Grid--1of4 > .Grid-cell {
    flex: 0 0 25%;
}

/* Small to medium screens */
@media (min-width: 24em) {
    .small-Grid--fit > .Grid-cell {
        flex: 1;
    }
    .small-Grid--full > .Grid-cell {
        flex: 0 0 100%;
    }
    .small-Grid--1of2 > .Grid-cell {
        flex: 0 0 50%;
    }
    .small-Grid--1of3 > .Grid-cell {
        flex: 0 0 33.3333%;
    }
    .small-Grid--1of4 > .Grid-cell {
        flex: 0 0 25%;
    }
}

/* Large screens */
@media (min-width: 48em) {
    .large-Grid--fit > .Grid-cell {
        flex: 1;
    }
    .large-Grid--full > .Grid-cell {
        flex: 0 0 100%;
    }
    .large-Grid--1of2 > .Grid-cell {
        flex: 0 0 50%;
    }
    .large-Grid--1of3 > .Grid-cell {
        flex: 0 0 33.3333%;
    }
    .large-Grid--1of4 > .Grid-cell {
        flex: 0 0 25%;
    }
}

在 Github 中查看这个 demo 中完整的栅格组件 源代码