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