工业化、响应式的的CSS3 grid布局应用及其向后兼容问题-- 下 --（翻译自smashingmagazine，有删改）

接上，[工业化、响应式的的CSS3 grid布局应用及其向后兼容问题– 上 –（翻译自smashingmagazine，有删改）](工业化、响应式的的CSS3 grid布局应用及其向后兼容问题– 上 –（翻译自smashingmagazine，有删改）)

live example

应用先进的格子布局和功能

步骤如下：
1.从最窄的屏幕开始设计布局
2.逐渐增大屏幕，直到一切变得看上去奇怪
3.加断点
4.回到步骤2

最后的代码如下

@supports (grid-area:auto){
    @media screen and (min-width: 500px){
        .site{
            width: 70em;
            display: grid;
            grid-template-columns:15em 1fr;
            grid-template-rows:1fr minmax(1em , auto);
            grid-template-areas:'header main'
                                'header sidebar'
                                'header footer';
        }


        .site-header{
            grid-area:header;
            background: lightblue;
        }

        .site-main{
            grid-area:main;
            height: 50em;
            background: olive;
        }

        .widget-area{
            grid-area:sidebar;
            height: 20em;
            background: yellow;
        }

        .site-footer{
            grid-area:footer;
            height: 10em;
            background: grey;
        }

    }

    @media screen  and (min-width: 700px){
        .site{
            width: 90em;
            display: grid;
            grid-template-columns:20em 2fr 1fr;
            grid-template-rows: 1fr minmax(10em, auto);
            grid-template-areas:'header main sidebar'
                                'header footer footer';

        }
    }

        .site-header{
            grid-area:header;
            background: lightblue;
        }

        .site-main{
            grid-area:main;
            height: 20em;
            background: olive;
        }

        .widget-area{
            grid-area:sidebar;
            height: 20em;
            background: yellow;
        }

        .site-footer{
            grid-area:footer;
            height: 10em;
            background: grey;
        }


}

注意对每个grid item 都要设定适当的高度。而且这里的宽高如果是百分数的话，会相对于它所处的格子的大小，而不是整个父元素。

档案布局archive layout

注意，fr不会限制内容的大小，如果内容的字太多，或者因为单词太长那一行特别长，元素会占据比应有的fr更多的空间。

写媒体查询的时候，因为用的是min-width，所以要从小到大写。

如果想要item之间有间隔线，可以通过设定container的背景颜色，并给定grid-gap值来完成。

对一些特殊的post内容，可以使其占据两行，直接采用gird-column: span 2来完成。注意此时post的容器布局本身必须不小于2行。

@media screen and (min-width: $query__medium) {
    .archive-view {
        .site-main {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 1px;
            background: grey;

            @media screen and (min-width: $query__wide) {
                grid-template-columns: repeat(3, 1fr);
            }

            @media screen and (min-width: $query__x_wide) {
                grid-template-columns: repeat(4, 1fr);
            }

            @media screen and (min-width: $query__xx_wide) {
                grid-template-columns: repeat(5, 1fr);
            }
        }

        .entry-title {
            word-break: break-word;
        }
        .post {
            background: white;
        }

        .category-featured {
            grid-column: span 2;
        }
    }
}

单一post或页面布局

body:not(.archive-view) {
    @supports (grid-area: auto) {
        @media screen and (min-width: $query__medium) {
            .site-main {
                display: grid;
                grid-template-columns: 1fr minmax(auto, 46em) 1fr;
                align-content: start;
                grid-template-areas:
                    ". post ."
                    ". nav ."
                    ". comments .";
            }
            .post {
                grid-area: post;
            }
            .post-navigation {
                grid-area: nav;
            }
            .comments-area {
                grid-area: comments;
            }
        }
    }
}

一共用到了两个grid容器，一个是整体，一个是对文章本身应用grid布局。

.post {
    grid-area: post;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

这一条务必牢记在心：
不可以脱离文章的内容，重新定位它。

对有featured 图片的post，再做一次。
如果没有grid-gap，而featured image 因为是空元素，空间会自动折叠。但有gap在，就需要重新定义规则。

post {
    grid-area: post;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "header header header header"
        "meta meta meta meta"
        "featimg featimg featimg featimg"
        "content content content content"
        "footer footer footer footer";

    @media screen and (min-width: $query__wide) {
        grid-template-areas:
            "header header header header"
            "featimg featimg featimg featimg"
            "meta content content content"
            "footer footer footer footer";
    }
}

.entry-header {
    grid-area: header;
}

.entry-meta {
    grid-area: meta;
}

.featured-image {
    grid-area: featimg;
}

.entry-content {
    grid-area: content;
}

.entry-footer {
    grid-area: footer;
}

总结

不再利用笨拙的hack方法，而是用简练干净的grid来完成布局。如果坚持向后兼容，你也可以利用@supports方法来渐进式增强。

最后，实例在此，可以打开开发者工具看