5分鐘掌握Grid佈局【多圖示例】

Grid佈局一覽
網格系統
- 生成網格系統：display:gird
- "畫"一個網格出來： grid-template-columns/rows
- 圈地為王（"畫"一個元素）：grid-column/row
  - 視覺化佈局：grid-template-areas
給網格設定gap
富餘空間管理
越界處理與grid-auto-columns
自動放置與grid-auto-flow
其它現象
- grid-item數>grid-cell數
- 行級元素設定為grid時

pre-notify

看完不會算我輸！ლ(′◉❥◉｀ლ)

Grid佈局一覽

大概看一下就好，下面我們會從頭講起。

其中內容部分的高度也可以不用calc()計算出的結果來表示而是使用auto，只不過這樣的話我們需要將.container容器的height設定為100%。

網格系統

生成網格系統：display:gird

當給一個容器（我們稱這樣的容器為grid-container）設定為display:gird時其內部的直接子元素都會轉換為grid-item。

grid-item類似於將一個元素block化，參考最初的那個栗子中的span元素。如果一個元素已經是block元素並且它自身帶有margin等樣式，那麼這些樣式會被保留。

"畫"一個網格出來： grid-template-columns/rows

template template template模擬三遍關鍵字，嗯。。名字真怪

So以上就是一個3x3的網格，它的每個格子都是邊長為100px的正方形，嗯，對照右邊的程式碼你應該可以意會到怎麼回事。

值得一說的是這個3x3的網格是由4條列網格線和4條行網格線形成的。並且我們能為每條網格線取一個名字

grid-template-columns:[c1] 100px [c2] 100px [c3] 100px [c4];
grid-template-rows:[r1] 100px [r2] 100px [r3] 100px [r4];
複製程式碼

嗯，取名字有什麼用呢?莫方!我們馬上講到。

圈地為王（"畫"一個元素）：grid-column/row

[warning] 有些姓馬的同學看到這一節標題肯定納悶，哎呀哎呀，這API長得不是和上面那一節的API一樣嗎？一樣個鬼咧，這個一對沒有template字樣，並且column/row都不帶s

我們都知道一個矩形由4條邊組成，嗯，記得我們上一節中給每一條網格線取了個名字嗎？嘿，是不是突然明白了什麼。

注意，grid-column:c1/c3中的/並不是除號，而是表示到/To的意思，它表示你在這張網格里放了一個元素，這個元素的寬度是c1列網格線到c3列網格線之間的距離。

除了上面這種表示一個元素寬高的方式，我們還能直接使用數字

grid-column: 1/3; //第一條網格線到第三條網格線的距離
grid-row:2/3;
複製程式碼

視覺化佈局：grid-template-areas

又或則我們可以把一個元素(grid-item)實際的樣式大小交給它的父容器(grid-container)來決定。

不過我們需要先給這個grid-item取個名字

.item1{
  grid-area:item1;
}
複製程式碼

接著

注：一個.代表一個空的網格單元，另外grid-tempalte-areas的值只在最後一行有;

嗯，如果這一節的栗子看懂了（怎麼能，怎麼能！看不懂！），那麼最開始的佈局的例子想必小夥伴現在也能看懂啦~

至此你已經掌握住了Grid中最重要的部分，其餘都是細節都是細節啦（嗯，只說了兩遍），是不是很簡單~(づ￣ 3￣)づ

給網格設定gap

要宣告的一點是，grid-gap的值就像padding什麼的一樣是一個複合值（padding-left/top），只設定一個是表示橫縱向gap值相等。

Grid相較於Flex最大的一點不同之處就在於Grid是一個二維佈局系統（Flex是一維的），什麼是二維？什麼是一維呢？

富餘空間管理

和Flex一樣分為父容器的富餘空間的管理和子item的富餘空間的管理。

gird-container富餘空間管理API

justify-content
align-content

gird-item富餘空間管理API

justify-items
align-items

同樣的justify是負責行向富餘空間的管理，align是負責縱向的富餘空間的管理。

並且不論是justify還是align屬性，不論是父容器(grid-container)還是grid-item，它們各自的justify和align屬性的值都存在start/end/center/stretch四個選項。

grid-container和grid-item之間唯一需要注意的是，grid-container的justify和align屬性還存在3個grid-item元素所不具有的屬性值：space-around/space-between/space-evenly

[danger] 注意： justify-content/align-content/justify-items/align-items 都是grid-container下的css屬性，雖然justify-items/align-items是針對grid-item的富餘空間管理，但請注意，-items是有一個s的，這意味著這個css屬性是對所有grid-item生效的，如果你要單獨對某個grid-item進行設定，請使用grid-self

另外我們若只在grid-template-columns中設定grid-line，也能達到網格項自適應網格容器的效果（類似於justify-content:stretch,或則使用1fr等分單位）

越界處理與grid-auto-columns

如果你“畫”的元素的長寬超過了你“畫”的網格的網格線行數或列數，Grid系統會自動為你補充上。但網格軌道的寬度是否滿足你的需求需要你自己去留意。

自動放置與grid-auto-flow

當你既不在一個grid-container中用grid-template-areas給一個grid-item設定長寬又不在grid-item內部用grid-column/row自己去設定（並且不設定自己的名字），那麼，這個grid-item會被當做一個網格單元格來繪製，並按照橫向或縱向的方式依次放置進閒置的網格空間。