CSS布局之網格地區

到目前為止，網格項目都是安置在獨立的儲存格內，但我們應該打破這樣的局限，讓網格項目可以超出儲存格的介面，實現更多有用的布局。那這一節我們來看怎麼實現。

定義網格地區

這裡有一個我們一直努力想實現的網格：九個網格項目分成了三個等列和等行的網格之中，列與列以及行與行之間有一個20px的間距。

　　

目前，只給網格項目設定了一些顏色樣式，但根據第一節教程中的內容，我們可以在此基礎上添加grid-column和grid-row的樣式規則：

　　

grid-column其實是grid-column-start和grid-column-end的縮寫，告訴網格項目.item-1從網格線1開始到網格線3結束。

　　

下面的樣本示範的就是第一個網格項目橫跨兩個儲存格，而其他的網格項目就會自動向右和向下排列，而整個過程都是網格自動計算的。

　　

　　

同樣也可以運用於grid-row上，讓儲存格在橫跨幾行：

　　

　　

跨儲存格

可以使用一個更為簡單的文法，在grid-column-end中使用一個關鍵詞span。通過span告訴我們跨越的儲存格數，而不需要指定結束的網格線。

　　

這樣得到的效果和前面使用

　　

得到的效果是一樣的。

　　

在下面的樣本中，我們刪除了四個網格項目。其中給兩個網格項目做了位置處理。第一個網格項目的行和列都跨了2個儲存格，而第四個網格項目排在第三列第二行，並且行做了兩個儲存格的跨越。

　　

　　

其他的網格項目會自動填滿可用空間。這裡只突出了網格布局的優勢之處，並沒有反映元素的來源順序。

註：在有些情況下反映來源順序也是非常重要的，我們不要忘了，你的網頁可能還有很多殘障人士在訪問，所以很多性況之下是需要考慮無障礙方面的設計。

網格中的儲存格跨越，其實就類似於table中的合併儲存格，比如colspan合并列，rowspan合并行。

聲明地區

到目前為止，咱們採用數字描述的方式，可以讓網格工作的很好，但網格模板地區（ Grid Template Areas）可以讓布局更為直觀。

具體來說，可以對網格地區命名。使用這些已命名的網格地區(替代網格線的數字)來給網格項目定位。接下來的樣本是使用網格地區的名稱來製作一個粗略的頁面配置，這個布局主要包括：

• header（頁頭）

• main content（主內容）

• sidebar（側邊欄）

• footer（頁尾）

• 
  

我們需要在網格容器上定義這些網格地區的名稱，就像是在這裡繪製一個布局一樣：

　　

網格項目定位

現在我們要關注的是網格項目，這裡使用grid-area來替代了前面所使用的grid-column和grid-row規則：

　　

第一個網格項目是頁頭，它跨越了三個header。第二個項目分配到主內容地區，第三個是側邊欄，第四個是頁尾。而這些都不需要按照順序源（文檔流）來使用。我們可以輕鬆的將.item-4變成頁頭。

　　

正如你看到的，這使得網而的布局變得更加容易。事實上，上面的樣本直觀的表達了我們所需要的網格地區名稱，其實，我們還可以更進一步的，可以使用一些Emoji來聲明網格的地區。

　　

效果如下：

　　

網格地區嵌套

很多時候，Web的頁面有各種的嵌套，所以我們一起來看看如何使用網格來實現這種嵌套的布局。

當我們使用display:grid就已經聲明了一個網格容器，只要是它的後代元素就會自動成為網格項目。內容添加到這些子項目內網格一點都不會受影響，除非我們顯示的重設過。

接下來的樣本中，把.item-5、.item-6和.item-7放在.item-2裡面：

　　

所以我們只需要把.item-2也聲明為一個網格容器，而且是一個兩行兩列的網格：

　　

我們可以在這裡繼續使用header、article和sidebar來給網格地區命名。不會造成不必要的麻煩的，因為這一切都跟其上下文有關。而這些網格地區只適用於.item-2這個網格內。

　　

總結

簡單總結一下前面討論的東西：

• grid-column是grid-column-start和grid-column-end的縮寫，用來定義一個網格項目開始和結束的簡便方法

• 可以使用span關鍵詞實現網格合并，讓規則變得更靈活

• 使用grid-template-areas來聲明網格地區名稱，甚至可以使用Emoji來聲明網格地區

• 可能在網格項目中使用display:grid來聲明網格項目是一個網格容器，實現網格的嵌套

• 
  

通過這篇文章，我們又學到了一些有關於CSS Grid布局的一些規範，這讓我們使用CSS Grid來布局在現實中越來越近。在接下來的教程中，我們將看到一些複雜的布局。