之前寫flex布局基礎(chǔ)知識(shí)整理提到了網(wǎng)格布局心墅，也大概說了下它與flex布局的區(qū)別。
flex只是一維布局（沿橫向或縱向）鹉梨，而CSS Grid Layout屬于二維布局（同時(shí)沿橫向和縱向）婴程；也就是說如果我們只想單獨(dú)控制行或者列時(shí)晋辆，我們可以考慮使用flex布局渠脉，如果我們想要同時(shí)同時(shí)行和列時(shí)，我們可以考慮使用網(wǎng)格布局瓶佳。還有一種方法來決定我們是使用彈性盒還是網(wǎng)格布局就是：彈性盒布局是從內(nèi)容出發(fā)的芋膘，而網(wǎng)格布局是從布局出發(fā)的。
具備二維布局功能的CSS Grid網(wǎng)格布局可以很輕松的實(shí)現(xiàn)各種布局霸饲，且其兼容性越來越好为朋。相信到后面它會(huì)越來越流行。
一贴彼、CSS Grid網(wǎng)格布局屬性總結(jié)
最近抽空潜腻，將CSS Grid 布局完全指南(圖解 Grid 詳細(xì)教程)文章（它將CSS Grid網(wǎng)格布局所有屬性都列出來了，并且都有詳細(xì)說明和舉例）仔細(xì)讀了一遍并做了個(gè)提煉器仗，制作了思維導(dǎo)圖融涣。下圖中（PC端需要點(diǎn)擊圖片放大后點(diǎn)擊查看原圖再點(diǎn)擊放大才可以看清），舉例部分我隱藏了精钮，建議點(diǎn)擊這里下載思維導(dǎo)圖文件查看威鹿。
二、注意點(diǎn)
網(wǎng)格容器中的屬性justify-items控制的是網(wǎng)格項(xiàng)內(nèi)的內(nèi)容的對(duì)齊方式（橫向轨香，即水平方向上的）忽你，而不是justify-content。（justify-content控制的是網(wǎng)格容器內(nèi)的網(wǎng)格項(xiàng)的對(duì)齊方式【因?yàn)榫W(wǎng)格大小可能被寫死了臂容，網(wǎng)格容器大于網(wǎng)格合計(jì)大小】）科雳，同理，align-items和align-content也是一樣的脓杉；
三糟秘、新名詞解釋
1、fr
這個(gè)表示等分的意思球散；例如：grid-template-columns: 1fr 3fr尿赚，
表示分為兩列網(wǎng)格，第一個(gè)網(wǎng)格項(xiàng)占列的1份蕉堰，第二個(gè)網(wǎng)格項(xiàng)占列的3份凌净，即第一個(gè)網(wǎng)格項(xiàng)的列占總寬度的1/4，第二個(gè)網(wǎng)格項(xiàng)的列占總寬度的3/4屋讶；
還有這樣 grid-template-columns: 100px 1fr 3fr的用法表示冰寻，第一個(gè)網(wǎng)格項(xiàng)占列的100px寬度，第二個(gè)占總寬度減100px后的寬度的1份皿渗，第二個(gè)占總寬度減100px后的寬度的3份性雄；
2没卸、minmax(x,y)
這個(gè)看字面意思也挺好理解的，就是表示要求的最小和最大值是多少秒旋；
比如grid-auto-rows: minmax(auto,200px)
3、span
span表示跨度的意思诀拭；它有兩種用法迁筛，一個(gè)是span <number> （后面接純數(shù)字），另一個(gè)是span<name> （后面接網(wǎng)格線的名稱）耕挨，顯而易見细卧，第一個(gè)表示的是跨過多少個(gè)網(wǎng)格軌道，第二個(gè)表示的是跨到哪一條網(wǎng)格線筒占；
比如：
4贪庙、 repeat
比如我們遇到這樣的情況grid-template-rows: 1fr 1fr 1fr 2fr 我們可以這樣寫grid-template-rows: repeat(3,1fr) 2fr；或者遇到 grid-template-rows: 1fr 2fr 1fr 2fr 1fr 2fr 2 fr我們可以這樣寫grid-template-rows: repeat(3,1fr 2fr) 2fr翰苫；
5止邮、auto-fit
自適應(yīng)的意思，例如這樣可以這樣用 grid-template-columns:repeat(auto-fit,100px) 表示網(wǎng)格布局系統(tǒng)會(huì)根據(jù)瀏覽器的寬度自行計(jì)算及分布n個(gè)100px寬度的網(wǎng)格項(xiàng)奏窑；
再比如：grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
6导披、object-fit及object-position（自己查資料遇到不相關(guān)的新概念）
按照愚人碼頭的翻譯寫了簡(jiǎn)單的demo
object-fit及object-position具體解釋可參考半深入理解CSS3 object-position/object-fit屬性
四、其他資料推薦
1埃唯、5分鐘學(xué)會(huì) CSS Grid 布局--愚人碼頭版
這個(gè)就介紹了常用的屬性撩匕，可以作為入門資料。
2墨叛、如何使用 CSS Grid 快速而又靈活的布局
這個(gè)可以讓你很快理解grid-template-areas及grid-area屬性
3止毕、網(wǎng)格布局的基本概念--MDN資料
這個(gè)資料介紹的不是很詳細(xì)，但也可以大概過下漠趁。扁凛。。
4棚潦、練習(xí)Grid布局的游戲推薦
http://cssgridgarden.com/#zh-cn
