更棒，更简洁的栅格系统 — Solved by Flexbox

1/2

1/3

1/4

高度撑满，即使内容没有填满空间。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque.

独立的尺寸

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

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

1/2

auto

1/3

1/4

auto

1/3

响应式

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

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

Full / Halves

Full / Thirds

栅格嵌套

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

1/3

1/2

1/3

对齐特性

置顶对齐栅格

我应该置顶对齐。

Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae. Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh.

我应该置顶对齐。

置底对齐栅格

我应该置底对齐栅格。

垂直居中栅格

我应该相对于我右边的格子垂直居中。

Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. Ut interdum ligula id metus hendrerit cursus. Integer eu leo felis. Aenean commodo ultrices nunc, sit amet blandit elit gravida in. Sed est ligula, ornare ac nisi adipiscing, iaculis facilisis tellus. Nullam vel facilisis libero. Duis semper lobortis elit, vitae dictum erat.

混合垂直对齐

我应该置顶对齐。

我应该垂直居中。

我应该置底对齐。

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%;
    }
}