工业化、响应式的的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方法来渐进式增强。

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