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會被當作一個網格單元格來繪製，並按照橫向或縱向的方式依次放置進閒置的網格空間。

其他值：

• column：從上往下放，到底了再從另外一列（從左往右）開始再從上往下繼續放
• dense T_T沒發現和row有什麼區別

其它現象

grid-item數>grid-cell數

當採用grid-template-areas的渲染方式時，多餘的item會被截取掉

當採用grid-auto-flow自動放置的時候

設置爲column的時候

注意： 此時請不要給item取名，由於這樣會產生不可控的佈局現象

行級元素設置爲grid時

咱們能夠發現當一個行級元素被設置爲 display:grid時，它會獨佔一行

grid-container並不會轉換爲border-box

grid-container雖然會block化，但僅此而已

grid-item會轉換爲margin-box

對的，你沒有看錯，是margin-box，比border-box還牛逼！

=== End ===