css柵格佈局GRID教學

Grid，真的佈局神器。 Css在引進Flex佈局和Grid佈局兩個模組後，才真正有了佈局的概念。最初的table佈局不知道是神馬鬼，再到 float 滿天飛，可能還要使用abosulte來實現頁面的佈局。總之，實現起來特別彆扭，要時時注意：我這麼寫會不會塌陷，會不會給後面的元素造成影響，尼瑪為啥還串位了。筆者鬥膽的稱這些實作為佈局trick，Flex和Grid才是真的布。局。 Flex負責一維佈局，Grid負責二維佈局，兩個佈局都非常強大，但是一個比一個難，屬性多到想吐血，誰讓人家牛逼是模組而不是屬性呢。今天我們只圍繞下圖來介紹Grid佈局相關概念

#網格容器

#Grid佈局開始的地方，grid模組的承載體。外部看來就是個區塊也可能是inline-block區塊，容器內部一個格一個格的。和 Flex 佈局一樣，它也分容器屬性和項目屬性。

網格線

網格線有橫線和縱線，縱橫交錯的線就將網格容器切割成了最小的單元單元格。網格線是有編號的，從數字1開始編號。上圖中有6條橫線和6條縱線。如果你喜歡也可以給線取名字，一條線還能有多個名字。

單元

Grid Cell 圖中綠色背景的區塊就是單元格，網格佈局的最小計量單位，該容器一共有25個單元格。

網格軌道

兩條相鄰的網格線中間部分就是軌道，為啥要有軌道的概念呢?因為需要設定軌道的寬度，如果將寬高單獨的設置到單元格上那很可能變成了瀑布流複雜程度嗖嗖地上升。再看看上圖的淺藍色和淺粉紅色軌道感受一下。

網格區域

網格線、單元格、和軌道存在的意義就是將容器劃分出你所需要的區域Grid Area。區域是可包含多個儲存格的一個整塊，那麼如何劃分呢？兩條橫的網格線和兩條縱的網格線交叉的部分就是區域了。將容器合理的劃分出多個區域，那麼佈局目的也達到了。區域是可以重疊的，所以它是有 z-index。

今天的概念部分就介紹到這裡。後續會詳細的介紹 grid佈局程式相關的知識。
ps: 圖片摘抄於CSS Grid佈局：什麼是網格佈局

姊妹篇深入理解佈局神器flexbox

# #Grid，真的是佈局神器。 Css在引進Flex佈局和Grid佈局兩個模組後，才真正有了佈局的概念。最初的table佈局不知道是神馬鬼，再到 float 滿天飛，可能還要使用abosulte來實現頁面的

佈局。總之，實現起來特別彆扭，要時時注意：我這麼寫會不會塌陷，會不會給後面的元素造成影響，尼瑪為啥還串位了。筆者鬥膽的稱這些實作為佈局trick，Flex和Grid才是真的佈局。 Flex負責一維佈局，Grid負責二維佈局，兩個佈局都非常強大，但是一個比一個難，屬性多到想吐血，誰讓人家牛逼是模組而不是屬性呢。今天我們只圍繞下圖來介紹Grid佈局相關概念。

網格容器

Grid佈局開始的地方，grid模組的承載體。外部看來就是個

區塊也可能是inline-block區塊，容器內部一個格一個格的。和 Flex 佈局一樣，它也分容器屬性和項目屬性。

網格線

網格線有橫線和縱線，縱橫交錯的線就將網格容器切割成了最小的單元

單元格。網格線是有編號的，從數字1開始編號。上圖中有6條橫線和6條縱線。如果你喜歡也可以給線取名字，一條線還能有多個名字。
#

單元格

Grid Cell 圖中綠色背景的區塊就是單元格，網格佈局的最小計量單位，該容器一共有25個單元格。

網格軌道

兩條相鄰的網格線中間部分就是軌道，為啥要有軌道的概念呢?因為需要設定軌道的寬度，如果將寬高單獨的設置到單元格上那很可能變成了瀑布流複雜程度嗖嗖地上升。再看看上圖的淺藍色和淺粉紅色軌道感受一下。

網格區域

網格線、單元格、和軌道存在的意義就是將容器劃分出你所需要的區域Grid Area。區域是可包含多個儲存格的一個整塊，那麼如何劃分呢？兩條橫的網格線和兩條縱的網格線交叉的部分就是區域了。將容器合理的劃分出多個區域，那麼佈局目的也達到了。區域是可以重疊的，所以它是有 z-index。

以上內容就是css柵格佈局GRID教學，希望能幫助大家。

相關推薦：

CSS Grid佈局指南

CSS Grid佈局模組簡介_html/css_WEB-ITnose

五分鐘教你 CSS Grid 佈局

以上是css柵格佈局GRID教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！