摘要：我們還需要調(diào)整其他元素的填充以匹配對(duì)于下一個(gè)臨界值，我們對(duì)網(wǎng)格項(xiàng)重新排列，使它們排列在一個(gè)列中。

by Chris House
譯者：若愚老師
想要更好的閱讀體驗(yàn)可在饑人谷技術(shù)博客 查看原文
要看懂這篇文章，推薦先簡(jiǎn)單過(guò)一遍姊妹篇 CSS Grid 系列(上)-Grid布局完整指南

當(dāng)我開始一個(gè)項(xiàng)目，并開始計(jì)劃如何布局主頁(yè)時(shí)，我的大腦復(fù)現(xiàn)出浮動(dòng)和定位。有些人可能會(huì)使用 Bootstrap 或其他框架。 那是因?yàn)檫@是2016年，我們一直在用這些方法來(lái)做布局。 但假設(shè)我們乘坐時(shí)光機(jī)來(lái)到2018年，所有主流瀏覽器都支持CSS Grid 布局模塊。此時(shí)我們的頁(yè)面布局模式已經(jīng)完全改變，CSS的功能最終強(qiáng)大到能輕松實(shí)現(xiàn)我們的設(shè)計(jì)目標(biāo)，這是一個(gè)web開發(fā)人員最美好的時(shí)代。現(xiàn)在，讓我們使用超贊的工具——Grid布局來(lái)創(chuàng)建一個(gè)主頁(yè)。

下面是我們將要實(shí)現(xiàn)的頁(yè)面

在我們開始編碼之前，我們需要進(jìn)入網(wǎng)格的思維模式。 第一步是觀察我們的設(shè)計(jì)稿，并將其劃分為主要的網(wǎng)格組件。 以下是我為此設(shè)計(jì)做的劃分：

你會(huì)發(fā)現(xiàn)整個(gè)頁(yè)面分為7個(gè)頂級(jí)網(wǎng)格區(qū)域。 我之所以說(shuō)“頂級(jí)”是因?yàn)槲覀兛梢栽谄鋬?nèi)部繼續(xù)嵌套網(wǎng)格，這正是我們將要對(duì)hero部分所做的事：

這是HTML的基本結(jié)構(gòu)。 稍后我會(huì)顯示整個(gè)完成的文件，但現(xiàn)在我已經(jīng)省去了大部分的細(xì)節(jié)。 這里要注意的重要部分是作為 body 的直接后代的7個(gè)元素：top-bar、main-header、hero、 blog-posts、 news、 side-bar 以及 main-footer。 body將成為我們的網(wǎng)格容器(grid container)，它的孩子將成為網(wǎng)格項(xiàng)(grid items)。

正如剛剛提到的，我們也將設(shè)置 hero 作為網(wǎng)格容器。 它有兩個(gè)孩子，將作為網(wǎng)格項(xiàng)：message 和 award。

Okey，我們按照這種方式講解，教程中我們不會(huì)展示所有使用到的CSS，在文章的最后我會(huì)展示最終完整的文件?，F(xiàn)在我們只關(guān)注吸引我們的網(wǎng)格部分以及任何與它直接相關(guān)的樣式即可。

我們首先在body上定義主網(wǎng)格容器：

body{
  display: grid;
  grid-template-columns: 12% auto 400px 12%;
  grid-template-rows: auto auto 950px auto auto auto;
}

我們剛剛創(chuàng)建了一個(gè)4列6行的網(wǎng)格，第一列和最后一列將作為主內(nèi)容兩側(cè)的填充。 我把第三列設(shè)置為400px，因?yàn)檫@是我們將要放置side-bar元素的地方，我們希望這是一個(gè)固定的寬度。 hero 元素（第三行）的固定高度為950px。

現(xiàn)在我們使用grid-template-areas來(lái)定義某個(gè)網(wǎng)格區(qū)域會(huì)跑到哪里。 這是非常有趣的部分：

body{
  display: grid;
  grid-template-columns: 12% auto 400px 12%;
  grid-template-rows: auto auto 950px auto auto auto;
  grid-template-areas: "top-bar     top-bar     top-bar     top-bar"
                       "main-header main-header main-header main-header"
                       "hero        hero        hero        hero"
                       ".           blog-posts  side-bar    ."
                       ".           news        side-bar    ."
                       "main-footer main-footer main-footer main-footer";  
}

grid-template-areas讓我們能把元素放在任何想要放置的地方，并且對(duì)于元素的布局該屬性給我們提供一個(gè)不錯(cuò)的可視化。 值得注意的是，這里使用的值（top-bar，main-header，hero等）不是指那些元素的類名，而是指我們用grid-area屬性給它們起的名字，下一步我們將對(duì)它們命名。

當(dāng)網(wǎng)格區(qū)域名稱重復(fù)時(shí)，該元素將跨越這些列/行。 例如，top-bar 橫跨四列，side-bar橫跨四行和五行。 .號(hào)代表空單元格。如果你回頭看看上面的完整設(shè)計(jì)，您會(huì)看到這個(gè)定義如何與我們的網(wǎng)格模式相匹配。

假設(shè)我們已經(jīng)應(yīng)用了我們所有的樣式，但還沒(méi)有為網(wǎng)格項(xiàng)分配網(wǎng)格區(qū)域名稱，到目前為止我們的頁(yè)面看起來(lái)還不太好：

在將網(wǎng)格區(qū)域名稱分配給網(wǎng)格項(xiàng)之前，網(wǎng)格將根據(jù)它們的源順序自動(dòng)將我們的元素放置在網(wǎng)格中。 顯然這不是我們想要的。 為了使我們的布局按預(yù)期工作，我們需要定義我們的網(wǎng)格區(qū)域。所以我們繼續(xù)往下走：

.top-bar{
  grid-area: top-bar;
} 
.main-header{
  grid-area: main-header;
} 
.hero{
  grid-area: hero;
}
.blog-posts{
  grid-area: blog-posts;
}
.news{
  grid-area: news;
}
.side-bar{
  grid-area: side-bar;
}
.main-footer{
  grid-area: main-footer;
}

需要注意的是這些名稱可以隨意設(shè)置。 為了方便，我選擇了讓它們與類名相匹配。

現(xiàn)在，我們已經(jīng)為網(wǎng)格項(xiàng)分配了網(wǎng)格區(qū)域名稱，它們將在被放置在網(wǎng)格中合適的位置。 這一步帶來(lái)的變化很大：

除了 hero 部分中的網(wǎng)格項(xiàng)外，所有內(nèi)容都完全按照需要正確放置，我們差不多要完成了。

但是在我們修復(fù) hero 部分之前，我想解釋一下一些難以理解的地方：主要內(nèi)容兩邊的填充區(qū)域的設(shè)置。 作為提醒，我們?cè)俅伟褎倓偟脑O(shè)置搬過(guò)來(lái)，用如下方式調(diào)整列：

body{
  grid-template-columns: 12% auto 400px 12%;
}

設(shè)置為12％的兩列用于填充主要內(nèi)容兩邊的空白，但是它們僅用于第四行和第五行。 回想一下，我們告訴我們的top-bar、main-header、hero和main-footer元素跨越所有列，包括這兩個(gè)“填充”列。 我們?yōu)槭裁催@樣做？ 因?yàn)槲覀兿Ｍ@些元素的背景色橫跨越整個(gè)視窗寬度，且任何一側(cè)都沒(méi)有空白。 我們只想在 blog-post/news和sidebar元素周圍留出空白（第四行和第五行）。

為了讓元素水平覆蓋整個(gè)寬度，同時(shí)讓元素里面的內(nèi)容保存一定的padding，我們需要顯示地在這些元素上設(shè)置padding：

.top-bar{
  padding: 4px 12%; 
}
.main-header{
  padding: 12px 12%;
}
.hero{  
  padding: 55px 12% 0 12%;
}
.main-footer{
  padding: 25px 12%;
}

我們給元素設(shè)置左右 padding 為12％，這和grid-template-areas定義中的第一列和最后一列的寬度是一樣的。 現(xiàn)在，需要填充整個(gè)寬度的元素最終呈現(xiàn)的結(jié)果是，背景橫跨水平寬度，但其內(nèi)容在兩側(cè)都預(yù)留出12％的空白。 很贊！

好了，讓我們來(lái)修復(fù) hero 部分。 這也將是一個(gè)網(wǎng)格容器，因此我們把它定義為一個(gè)網(wǎng)格，就像剛剛做過(guò)的那樣：

.hero{
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto auto;
  grid-template-areas: ".       .  award"
                       "message .  .    "
                       ".       .  .    "; 
 }

這是一個(gè)3×3的網(wǎng)格，除了中間的列，其它都設(shè)置為 auto。 我們給中間一列大小設(shè)為1fr，因?yàn)槲覀兿Ｍ诘谝涣泻妥詈笠涣杏脰|西填充后，剩下的空間完全需要完全填滿。

hero中只有兩個(gè)元素：message和award。 我們要message占據(jù)第二行的第一列，我們要award占據(jù)第一行的第三列。所以我們的完整網(wǎng)格定義應(yīng)該如下所示：

.hero{
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto auto;
  grid-template-areas: ".       .  award"
                       "message .  .    "
                       ".       .  .    ";  
 }

下面我們所要做的就是命名我們的元素：

.message{
  grid-area: message;
}
.award{
  grid-area: award;
}

就這樣，message和award卡入到位，我們的頁(yè)面完成：

CSS Grid 使用媒體查詢讓重新排列整個(gè)布局變得非常簡(jiǎn)單。你所做的就是重新放置你的網(wǎng)格項(xiàng)。現(xiàn)在回到我們的設(shè)計(jì)，簡(jiǎn)單起見，我們只對(duì)兩個(gè)寬度臨界值做響應(yīng)式處理，1600px 和 1050px。我們需要對(duì)一些元素（padding、margin等）進(jìn)行一些小的樣式調(diào)整，但是我不會(huì)把所有的樣式調(diào)整都全部展示在這里。后面我會(huì)放出完整的代碼，現(xiàn)在我們只需要關(guān)注關(guān)注網(wǎng)格相關(guān)的東西即可。

1600px 這個(gè)臨界點(diǎn)的處理比較簡(jiǎn)單，當(dāng)瀏覽器寬度到底1600px時(shí)我們將減少網(wǎng)站外部填充的地方。 之所以選擇1600px，是到了這個(gè)寬度后12％填充看起來(lái)不太合適。為了解決這個(gè)問(wèn)題，我們需要做的是在body上改變grid-template-columns的值，將第一列和最后一列減少到2％。 我們還需要調(diào)整其他元素的填充以匹配：

@media (max-width: 1600px) {
  body{
    grid-template-columns: 2% auto 400px 2%;
  }
  .top-bar{
    padding: 4px 2%;
  }
  .main-header{
    padding: 12px 2%;
  }
  .hero{
    padding: 55px 2% 0 2%;
  }
  .main-footer{
    padding: 25px 2%;
  }
}

對(duì)于下一個(gè)臨界值，我們對(duì)網(wǎng)格項(xiàng)重新排列，使它們排列在一個(gè)列中。 再次回頭看看我們?cè)瓉?lái)的代碼是如何對(duì)body進(jìn)行設(shè)置的：

body{
  display: grid;
  grid-template-columns: 12% auto 400px 12%;
  grid-template-rows: auto auto 950px auto auto auto;
  grid-template-areas: "top-bar     top-bar     top-bar     top-bar"
                       "main-header main-header main-header main-header"
                       "hero        hero        hero        hero"
                       ".           blog-posts  side-bar    ."
                       ".           news        side-bar    ."
                       "main-footer main-footer main-footer main-footer";  
}

下面是重新設(shè)置的媒體查詢：

@media (max-width: 1050px) {
  body{
    grid-template-columns: 3% auto 3%;
    grid-template-rows: auto auto auto auto auto auto auto;
    grid-template-areas: "top-bar     top-bar     top-bar"
                         "main-header main-header main-header"
                         "hero        hero        hero"
                         ".           blog-posts  ."
                         ".           news        ."
                         ".           side-bar    ."
                         "main-footer main-footer main-footer";
  }
}

我們?cè)谶@里做了一些重要的改變：將列數(shù)從四個(gè)減少到三個(gè)，將第一列和最后一列的值改為3％（3％在較窄的寬度上優(yōu)于2％），添加了 附加行，將所有行的長(zhǎng)度改為auto，并將side-bar移動(dòng)到自己的行。 現(xiàn)在我們的頁(yè)面元素很適合在較窄的寬度下展示：

下面是我們的主頁(yè)，以及完整的HTML和CSS文件。 你需要一個(gè)支持grid的瀏覽器來(lái)查看預(yù)覽。 我建議啟用Experimental Web Platform Features標(biāo)志的Chrome 49+（地址欄輸入 chrome：// flags ，并向下滾動(dòng)到“Experimental Web Platform Features”）。

下面的嵌入式頁(yè)面默認(rèn)會(huì)以移動(dòng)視圖展示，可以點(diǎn)擊“Edit on Codepen”在頁(yè)面全寬下展示不同的效果：

在 CodePen 查看效果 Building a Home Page with Grid by Chris House (@chrishouse) .

補(bǔ)充：基本布局代碼

加微信號(hào): astak10或者長(zhǎng)按識(shí)別下方二維碼進(jìn)入前端技術(shù)交流群 ，暗號(hào)：寫代碼啦

每日一題，每周資源推薦，精彩博客推薦，工作、筆試、面試經(jīng)驗(yàn)交流解答，免費(fèi)直播課，群友輕分享... ，數(shù)不盡的福利免費(fèi)送