CSS Grid 初识

CSS Grid (CSS网格) 是继 Flexbox之后又一非常重要的布局方法。目前，Chrome Firefox Safari 浏览器的最新版本已经开始支持它了。

本篇文章，我们通过实现如下布局的照片墙的例子来学习CSS Grid。

说在前面：FlexBox 与 CSS Grid 的区别？

Flexbox是一维的， CSS Grid是二维的。你想想，使用Flexbox的时候你需要通过定义flex-direction: row | column来决定布局方向。而CSS Grid可以行、列布局。

效果分析

首先，我们来分析一下最后的效果。我们把Bootstrap的网格系统搬到脑袋中，可以看到它是由4行4列组成的：

效果实现

首先，和Flexbox一样，我们需要定义一个Grid容器，并且通过display: grid声明使用grid布局方式。

定义列

随后，我们需要对列进行声明。通过grid-template-columns属性，以下方式定义了一个4列，每列200px的网格系统。

grid-template-columns: 200px 200px 200px 200px;

一种更简单的写法是：

grid-template-columns: repeat(4, 200px);

如果你并不想定义具体的数值，而是想每列的宽度按一行长度的占比来定义的话，可以使用Grid新引入的fr单位。fr是fraction(分数)的意思，也就是说你定义的就是分子，所有你定义的加起来就是分母。比如一整行是900px, 1fr 2fr就代表第一列占据1/3,第二列占据2/3。
在我们的效果图中，可以看到4列平分了一行的宽度，因此我们可以这样定义：

grid-template-columns: repeat(4, 1fr);

你还想在行列之间加一些间隔(Gutters), 使用grid-gap属性：

grid-gap: 0.5rem;

目前，我们的布局情况就是这样：

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap:0.5rem;
}
<div class="grid-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

定义行

当一行占满之后会自动切换到下一行。没有特别需要的话，你不用定义它。
不过像我们这里需要定义每一行的高度。定义行的方式也与前面讲的定义列的方式相似，使用grid-template-rows进行定义:

grid-template-rows: repeat(4, 150px);

有一点比较尴尬的是，我们往往不知道每一块的内容是多少，有时候内容的高度会溢出定义的高度，不过不用担心，你可以使用minmax(min, max)使高度更灵活。

grid-template-rows: repeat(4, minmax(150px, auto));

跨行列

以上，我们就定义好了我们网格系统的行列了。

在我们的效果图中，我们看到某些元素是占据了不止一行或者一列的，我们可以通过给每个元素(grid item)设置grid-column-start, grid-column-end来定义每一个元素开始和结束的地方。

灰色底色的数字呢，就代表着列。比如你想你的第一个元素横跨两列，那么这个元素从1开始，横跨两列，到3结束：

    grid-column-start: 1;
    grid-column-end: 3;

这样写，如果是后面的元素，计算它的开始位置实在不容易，因此你可以采用一种更现代的写法。通过span(扩展)关键字，意味着从这个元素应该开始的位置扩展几列。

grid-column-start: span 2;

跨行也是同样的写法，只是通过grid-row-start来定义。

最后，给每一个元素定义它应该占据的行列:

        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(4, minmax(150px, auto));
            grid-gap: .5rem;
        }
        .box-1 {
            grid-column-start: span 2;
            grid-row-start: span 2;
        }
        .box-2 {
            grid-column-start: span 2;
        }
        .box-4 {
            grid-row-start: span 3;
        }
        .box-5 {
            grid-row-start: span 2;
        }
        .box-6 {
            grid-column-start: span 2;
            grid-row-start: span 2;
        }

最最最后，给你的元素加上你最喜欢的背景图吧！！

【参考资料】：Grid by Example