接上，[工業化、響應式的的CSS3 grid佈局應用及其向後相容問題– 上 –（翻譯自smashingmagazine，有刪改）](工業化、響應式的的CSS3 grid佈局應用及其向後相容問題– 上 –（翻譯自smashingmagazine，有刪改）)

應用先進的格子布局和功能

步驟如下：
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方法來漸進式增強。