CSS Grid 系列(下)-使用Grid布局構建網站首頁

02-08

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

當我開始一個項目，並開始計劃如何布局主頁時，我的大腦復現出浮動和定位。有些人可能會使用 Bootstrap 或其他框架。那是因為這是2016年，我們一直在用這些方法來做布局。但假設我們乘坐時光機來到2018年，所有主流瀏覽器都支持CSS Grid 布局模塊。此時我們的頁面布局模式已經完全改變，CSS的功能最終強大到能輕鬆實現我們的設計目標，這是一個web開發人員最美好的時代。現在，讓我們使用超贊的工具——Grid布局來創建一個主頁。

設計

下面是我們將要實現的頁面

在我們開始編碼之前，我們需要進入網格的思維模式。第一步是觀察我們的設計稿，並將其劃分為主要的網格組件。以下是我為此設計做的劃分：

你會發現整個頁面分為7個頂級網格區域。我之所以說「頂級」是因為我們可以在其內部繼續嵌套網格，這正是我們將要對hero部分所做的事：

HTML

這是HTML的基本結構。稍後我會顯示整個完成的文件，但現在我已經省去了大部分的細節。這裡要注意的重要部分是作為 body 的直接後代的7個元素：top-bar、main-header、hero、 blog-posts、 news、 side-bar 以及 main-footer。 body將成為我們的網格容器(grid container)，它的孩子將成為網格項(grid items)。

正如剛剛提到的，我們也將設置 hero 作為網格容器。它有兩個孩子，將作為網格項：message 和 award。

CSS

Okey，我們按照這種方式講解，教程中我們不會展示所有使用到的CSS，在文章的最後我會展示最終完整的文件。現在我們只關注吸引我們的網格部分以及任何與它直接相關的樣式即可。

我們首先在body上定義主網格容器：

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

我們剛剛創建了一個4列6行的網格，第一列和最後一列將作為主內容兩側的填充。我把第三列設置為400px，因為這是我們將要放置side-bar元素的地方，我們希望這是一個固定的寬度。 hero 元素（第三行）的固定高度為950px。

現在我們使用grid-template-areas來定義某個網格區域會跑到哪裡。這是非常有趣的部分：

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讓我們能把元素放在任何想要放置的地方，並且對於元素的布局該屬性給我們提供一個不錯的可視化。值得注意的是，這裡使用的值（top-bar，main-header，hero等）不是指那些元素的類名，而是指我們用grid-area屬性給它們起的名字，下一步我們將對它們命名。

當網格區域名稱重複時，該元素將跨越這些列/行。例如，top-bar 橫跨四列，side-bar橫跨四行和五行。 .號代表空單元格。如果你回頭看看上面的完整設計，您會看到這個定義如何與我們的網格模式相匹配。

假設我們已經應用了我們所有的樣式，但還沒有為網格項分配網格區域名稱，到目前為止我們的頁面看起來還不太好：

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

.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;}

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

現在，我們已經為網格項分配了網格區域名稱，它們將在被放置在網格中合適的位置。這一步帶來的變化很大：

除了 hero 部分中的網格項外，所有內容都完全按照需要正確放置，我們差不多要完成了。

但是在我們修復 hero 部分之前，我想解釋一下一些難以理解的地方：主要內容兩邊的填充區域的設置。作為提醒，我們再次把剛剛的設置搬過來，用如下方式調整列：

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

設置為12％的兩列用於填充主要內容兩邊的空白，但是它們僅用於第四行和第五行。回想一下，我們告訴我們的top-bar、main-header、hero和main-footer元素跨越所有列，包括這兩個「填充」列。我們為什麼這樣做？因為我們希望這些元素的背景色橫跨越整個視窗寬度，且任何一側都沒有空白。我們只想在 blog-post/news和sidebar元素周圍留出空白（第四行和第五行）。

為了讓元素水平覆蓋整個寬度，同時讓元素裡面的內容保存一定的padding，我們需要顯示地在這些元素上設置padding：

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

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

好了，讓我們來修復 hero 部分。這也將是一個網格容器，因此我們把它定義為一個網格，就像剛剛做過的那樣：

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

這是一個3×3的網格，除了中間的列，其它都設置為 auto。我們給中間一列大小設為1fr，因為我們希望在第一列和最後一列用東西填充後，剩下的空間完全需要完全填滿。

hero中只有兩個元素：message和award。我們要message佔據第二行的第一列，我們要award佔據第一行的第三列。所以我們的完整網格定義應該如下所示：

.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卡入到位，我們的頁面完成：

引入響應式

CSS Grid 使用媒體查詢讓重新排列整個布局變得非常簡單。你所做的就是重新放置你的網格項。現在回到我們的設計，簡單起見，我們只對兩個寬度臨界值做響應式處理，1600px 和 1050px。我們需要對一些元素（padding、margin等）進行一些小的樣式調整，但是我不會把所有的樣式調整都全部展示在這裡。後面我會放出完整的代碼，現在我們只需要關注關注網格相關的東西即可。

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

@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%; }}

對於下一個臨界值，我們對網格項重新排列，使它們排列在一個列中。再次回頭看看我們原來的代碼是如何對body進行設置的：

下面是重新設置的媒體查詢：

@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"; }}

我們在這裡做了一些重要的改變：將列數從四個減少到三個，將第一列和最後一列的值改為3％（3％在較窄的寬度上優於2％），添加了附加行，將所有行的長度改為auto，並將side-bar移動到自己的行。現在我們的頁面元素很適合在較窄的寬度下展示：

The Live Code

下面是我們的主頁，以及完整的HTML和CSS文件。你需要一個支持grid的瀏覽器來查看預覽。我建議啟用Experimental Web Platform Features標誌的Chrome 49+（地址欄輸入 chrome：// flags ，並向下滾動到「Experimental Web Platform Features」）。

下面的嵌入式頁面默認會以移動視圖展示，可以點擊「Edit on Codepen」在頁面全寬下展示不同的效果：

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

補充：基本布局代碼

加小谷官方微信 hungervally，備註前端，可入群獲得一手免費學習教程。也可關注寫代碼啦公眾號XDML 了解最新前端動態~