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 布局