嘿~ 是時候學學柵格佈局GRID了 概念篇

下一篇 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