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變成頁頭。

　　

正如你所看到的，這使得網而的佈局變得更加容易。事實上，上面的範例直觀的表達了我們所需的網格區域名稱，其實，我們還可以更進一步的，可以使用一些表情符號來聲明網格的區域。

　　

效果如下：

　　

網格區域巢狀

#######################################################很多時候，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來宣告網格區域名稱，甚至可以使用表情符號來宣告網格區域

• ##可能在網格專案中使用display :grid來宣告網格專案是一個網格容器，實作網格的巢狀

• 
  

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

以上是CSS佈局之網格區域的詳細內容。更多資訊請關注PHP中文網其他相關文章！