當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

CSS布局之网格区域

發布時間：2023/12/15 综合教程 25 生活家

生活随笔收集整理的這篇文章主要介紹了 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）可以讓布局更為直觀。

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

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

網格項目定位

現在我們要關注的是網格項目，這里使用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這個網格內。

總結

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

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

以上就是CSS布局之網格區域的詳細內容，更多請關注風君子博客其它相關文章！

以上是生活随笔為你收集整理的CSS布局之网格区域的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。