Grid 網(wǎng)格布局這些年算是徹底翻身了。前幾年大家還在為“垂直居中”折騰半天現(xiàn)在隨便打開一個后臺系統(tǒng)、SaaS 產(chǎn)品界面幾乎都能看到 Grid 的影子。按社區(qū)里的說法Flexbox 解決的是“一根繩子上的排列問題”而 Grid 直接給你一張棋盤讓你從全局視角擺布頁面里的每一個模塊。標(biāo)題里拿“下圍棋”來比喻我覺得很貼切圍棋的精髓在于“金角銀邊草肚皮”先占角、再圍邊、最后爭奪中腹Grid 布局的核心也類似先把頁面切割成行列軌道再把內(nèi)容一一落位到交叉區(qū)域整體感非常強。這篇文章我會從 Grid 的底層心智模型講起結(jié)合我實際項目里的布局代碼把容器屬性、項目屬性、區(qū)域模板、隱式軌道這些概念逐一拆開最后整理一份排坑清單。無論你是剛接觸 CSS 的新人還是用了很久 Flex 想拓展布局思路的開發(fā)者都應(yīng)該能從中找到可以直接抄作業(yè)的部分。1. 為什么 Grid 能坐穩(wěn)二維布局的王座1.1 Flexbox 的天花板一維軸的局限在 Grid 成熟之前Flexbox 是前端布局的絕對主力。它解決的是“沿著一根軸排列元素”的問題水平排列、垂直排列、換行、對齊、拉伸這些都是 Flex 的舒適區(qū)。比如一個導(dǎo)航欄里放五個鏈接或者一個卡片底部放按鈕組用 Flex 寫起來非常順手。但如果你仔細(xì)想過會發(fā)現(xiàn) Flex 在真正的大版面面前經(jīng)?！笆共簧蟿拧?。最常見的就是卡片列表三列布局行數(shù)不定每一行還要保持卡片高度一致。用flex-wrap確實能讓卡片換行但換行之后不同行的卡片之間沒有“軌道”的概念——更準(zhǔn)確地說Flex 只關(guān)心主軸方向上的尺寸分配副軸方向上雖然能用align-items控制對齊但無法精確控制“這個元素占幾行幾列”。這就逼著開發(fā)者做“數(shù)學(xué)題”要三列就手工給每個子元素設(shè)width: 33.333%要留間距再把百分比減去gap折算。一旦內(nèi)容長度變化、容器寬度變化這些“手算寬度”的方案就特別容易崩窄屏上出現(xiàn)橫向滾動條、卡片擠壓錯位都是老生常談的 Flex 換行問題了。Grid 的誕生本質(zhì)上是把布局從“依靠元素自身寬度互相推擠”的模式升級為“先定義網(wǎng)格軌道再把元素放置到軌道交叉區(qū)”的模式。前者是元素驅(qū)動后者是容器驅(qū)動。用生活類比來說Flex 像在排隊每個人都往前挪Grid 像在電影院對號入座座位先畫好你只需要知道自己是幾排幾座。1.2 Grid 的心智模型從“排隊”到“對號入座”Grid 布局有兩個核心角色網(wǎng)格容器grid container和網(wǎng)格項目grid item。容器負(fù)責(zé)定義行和列也就是生成“軌道”項目則被放置在軌道切割出的單元格里。理解這套模型的關(guān)鍵在于區(qū)分三條線網(wǎng)格線grid line分隔軌道的線行與列都有各自的網(wǎng)格線編號從 1 開始。軌道track兩條相鄰網(wǎng)格線之間的區(qū)域水平方向是“行軌道”垂直方向是“列軌道”。單元格cell行軌道與列軌道交叉形成的最小單位和表格的單元格是一個概念。用圍棋來套棋盤是 19 x 19 的軌道陣列落子就是往交叉點放置項目。CSS Grid 里你也能把項目“跨”多行多列相當(dāng)于一顆子占了一片區(qū)域這在圍棋里叫“勢力范圍”。初學(xué)者最容易犯的思維錯誤是把 Grid 當(dāng)成表格的替代品。表格布局在語義上服務(wù)于“表格數(shù)據(jù)”并且表格有自動撐開列寬的行為習(xí)慣Grid 則是純布局工具列寬、行高、間距完全由你掌控。這也是為什么 Grid 比 Table 好用的地方——它不附帶任何“單元格內(nèi)容決定尺寸”的隱含邏輯默認(rèn)情況下軌道尺寸取決于你寫進(jìn)屬性的數(shù)值或者你聲明的自動尺寸規(guī)則而不是表格那種“內(nèi)容多寬就多寬”的強制行為。從操作系統(tǒng)的角度想Grid 相當(dāng)于給你的頁面畫了一個坐標(biāo)系X 軸定義列Y 軸定義行任何一片區(qū)域都可以精準(zhǔn)定位。你不需要為了“讓左邊欄寬度固定主區(qū)域填滿剩余空間”而寫一堆calc()或百分比只需一行g(shù)rid-template-columns: 240px 1fr剩余的寬度自然交給1fr軌道。2. 核心屬性逐個擊破容器、軌道與項目定位2.1 容器定義display: grid與軌道生成任何元素只要設(shè)置了display: grid它的直接子元素就會自動變成網(wǎng)格項目默認(rèn)排列成單列多行。但單列顯然不是我們想要的所以真正干活的屬性是grid-template-columns和grid-template-rows?？匆粋€最常見的后臺布局.layout { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr auto; min-height: 100vh; }這三行 CSS 就把頁面劃分成了兩列左側(cè)固定 240px 的側(cè)邊欄 右側(cè)自適應(yīng)寬度的主區(qū)域和三行頂部導(dǎo)航、內(nèi)容區(qū)、底部。auto在這里表示“由內(nèi)容撐開高度”而1fr表示“占據(jù)剩余空間的比例份額”。fr單位是 Grid 里最精髓的設(shè)計。它跟%不一樣%是基于容器尺寸的百分比總和不一定等于 100%fr則是把剩余空間按比例分配。比如grid-template-columns: 1fr 1fr 1fr;這段代碼定義了三個等寬的軌道相當(dāng)于各占三分之一。但如果某個軌道里面放了一個超長單詞或者固定寬度的圖片1fr軌道會根據(jù)內(nèi)容的最小尺寸自動調(diào)整不會被壓縮到不可讀。repeat()函數(shù)算得上高頻使用grid-template-columns: repeat(4, 1fr);等價于1fr 1fr 1fr 1fr在寫卡片網(wǎng)格時特別省事。repeat()也支持更復(fù)雜的模式比如repeat(2, 200px 1fr)意思是重復(fù)兩次“200px 加一個彈性軌道”在需要交替寬度的場景下很好用。軌道尺寸確定后別忘了軌道之間的縫隙。柵格系統(tǒng)的“溝槽”對應(yīng)這里就是gap屬性.layout { display: grid; gap: 16px; }gap是row-gap和column-gap的簡寫同時控制行間距和列間距。我見過不少老代碼還在用margin負(fù)數(shù)方案來模擬間距到了 Grid 時代完全沒必要了gap不會產(chǎn)生額外的外邊距折疊問題也不會影響子元素的尺寸計算。2.2 項目定位grid-column與grid-row容器定義好了接下來就是把項目放到想去的位置。這里要用到網(wǎng)格線的編號。默認(rèn)情況下一個有 4 列的網(wǎng)格網(wǎng)格線的編號是從 1 到 5。項目默認(rèn)“進(jìn)駐”第一個可用的行列位置但你可以通過項目上的屬性覆蓋它的位置。.item { grid-column: 2 / 4; /* 從第 2 條列網(wǎng)格線開始到第 4 條結(jié)束 */ grid-row: 1 / 3; /* 從第 1 條行網(wǎng)格線開始到第 3 條結(jié)束 */ }這里的2 / 4是“起始線 / 結(jié)束線”的寫法。另一種更直觀的寫法是用span.item { grid-column: 2 / span 2; }意思是“從第 2 條列網(wǎng)格線開始橫跨 2 個軌道”等價于2 / 4。我個人的經(jīng)驗是代碼可讀性上span更好尤其是別人看你的樣式時span 2直接傳達(dá)“占兩列”的意圖不需要數(shù)網(wǎng)格線。網(wǎng)格線的編號還支持負(fù)數(shù)從末尾倒數(shù)grid-column: 1 / -1是“從第一列到最后一列”常用于讓某個全寬元素橫跨所有軌道。這部分就是柵格系統(tǒng)的底層原理。你在 Element 或 Ant Design 里用的Col span{8}本質(zhì)上就是幫你生成grid-column: span 8老版本基于 Flex 百分比另說。理解了 Grid 的手寫方式以后再面對任何“組件庫的柵格為什么這么設(shè)計”的疑問答案已經(jīng)在你腦子里了。2.3 命名的力量grid-template-areas與grid-area網(wǎng)格線編號雖然精確但抽象。你寫grid-column: 2 / 4的時候可能根本不記得第 2 條線是哪個區(qū)域的邊界。特別是在復(fù)雜布局中項目一多寫線號簡直像查字典。Grid 給你提供了“命名區(qū)域”這個更高層的抽象用起來像在畫示意圖.layout { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: header header sidebar main footer footer; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }這個寫法的直觀程度拉滿grid-template-areas里的每一個字符串代表一行每個名字代表一個區(qū)域相同名字組成一個完整矩形。.代表空單元格。項目側(cè)只需要一個grid-area: 名字就完成定位不需要再關(guān)心線號。這里有幾個非常容易踩的坑我分開說區(qū)域必須形成矩形命名區(qū)域不能是 L 形或者其他不規(guī)則形狀。比如你不能寫成header header sidebar sidebar然后又讓主區(qū)域橫跨兩列的一部分那會導(dǎo)致屬性無效。想實現(xiàn)不規(guī)則布局只能拆成更細(xì)的命名網(wǎng)格。每一行的列數(shù)必須相同header header是兩列下面sidebar main也是兩列這沒問題。一旦有一行寫了三個名字另一行寫兩個整個grid-template-areas都會失效項目直接回到自動排列狀態(tài)?？瞻鬃址目訉懛ㄉ蟞eader header中間的空白可以隨意只要名字對齊即可但要注意字符串?dāng)?shù)量必須和grid-template-columns的軌道數(shù)一致。不一致時瀏覽器會忽略這個屬性而且不會有任何控制臺報錯非常隱蔽。我用grid-template-areas的時候基本流程是先在紙上畫出頁面的粗糙線框然后直接照葫蘆畫瓢寫成字符串。這個過程真的像在棋盤上先畫勢力范圍再去落子對我這種“空間想象力一般”的人特別友好。3. 從零搭一個頁面用網(wǎng)格下一盤完整的棋3.1 需求場景與整體設(shè)計思路下面我用一個具體的案例把上面的屬性串起來走一遍。場景是一個典型的內(nèi)容型后臺頁面頂部有導(dǎo)航欄左側(cè)是功能菜單右側(cè)是內(nèi)容展示區(qū)底部是版權(quán)信息。頁面拆解成四個區(qū)域頂欄全寬放 Logo 和用戶信息。側(cè)邊欄固定 240px放導(dǎo)航菜單。主內(nèi)容區(qū)自適應(yīng)寬度放卡片和表格。底欄全寬放版權(quán)說明。如果把四個區(qū)域直接寫成grid-template-areas長這樣.layout { display: grid; grid-template-columns: 240px 1fr; grid-template-areas: topbar topbar sidebar main footer footer; }等等這里只有兩列頂欄和底欄跨兩列側(cè)邊欄和主內(nèi)容區(qū)各占一列。聽上去完美但實際項目里主內(nèi)容區(qū)內(nèi)部還需要二次布局比如卡片區(qū)域要三列自適應(yīng)表格要撐滿全寬。所以我會把外層叫“骨架網(wǎng)格”內(nèi)層繼續(xù)用 Grid 或者 Flex 搭“局部網(wǎng)格”。這也是我反復(fù)強調(diào)的理念一個 Grid 只負(fù)責(zé)一個層級的布局不要試圖把整個頁面的所有細(xì)節(jié)都塞進(jìn)同一個網(wǎng)格容器。你搭的是骨架肌肉和紋理要留給子容器。3.2 HTML 結(jié)構(gòu)與完整 CSS 實現(xiàn)HTML 結(jié)構(gòu)簡化為div classlayout header classtopbar頂欄內(nèi)容/header aside classsidebar菜單列表/aside main classmain div classcard-list div classcard卡片1/div div classcard卡片2/div div classcard卡片3/div div classcard卡片4/div div classcard卡片5/div div classcard卡片6/div /div /main footer classfooter版權(quán)信息/footer /divCSS 骨架部分.layout { display: grid; min-height: 100vh; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: topbar topbar sidebar main footer footer; } .topbar { grid-area: topbar; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }側(cè)邊欄想固定寬度同時允許單獨滾動可以給.sidebar加overflow-y: auto但注意網(wǎng)格軌道本身在grid-template-columns里已經(jīng)設(shè)了 240px子元素內(nèi)容超出時默認(rèn)會影響軌道尺寸除非給側(cè)邊欄容器設(shè)min-width: 0或者overflow: hidden。這是 Grid 新手最常見的疑惑為什么我明明給了 240px側(cè)邊欄還是被內(nèi)容撐寬了因為網(wǎng)格項目有一個自動最小尺寸min-width: auto內(nèi)容多寬它就能撐多寬。要解決給項目加min-width: 0允許它縮小到軌道寬度。主內(nèi)容區(qū)的卡片列表才是內(nèi)部局部的重點.main { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; align-content: start; padding: 16px; }這段代碼信息量很大拆開講repeat(auto-fill, minmax(240px, 1fr))的意思是自動重復(fù)填入盡可能多的軌道每個軌道的最小寬度是 240px如果有剩余空間就均分剩余空間讓軌道變寬。容器寬度 800px 時除以 240px能放下 3 個軌道加上gap計算后剩余空間分給這 3 個軌道所以每個卡片約 256px 寬。容器寬度 500px 時只能放下 2 個軌道卡片就變成 1fr 均分每張約 242px。容器寬度小于 500px 但大于 240px 時仍然放 2 列直到寬度小于 240px才會降為 1 列。這一步就贏過了傳統(tǒng)手算百分比方案你不需要寫媒體查詢卡片列表會隨著容器寬度智能調(diào)整列數(shù)。align-content: start也值得解釋一下。因為.main本身是grid-template-rows沒有顯式定義行的主內(nèi)容區(qū)內(nèi)容高度可能小于容器剩余高度默認(rèn)情況下align-content是stretch也即項目會被拉伸到占滿整個內(nèi)容區(qū)高度。一般情況下這沒問題但如果卡片列表只有兩行你會看到卡片被拉得很高和設(shè)計稿不一致。設(shè)成start后行軌道的高度等于內(nèi)容高度卡片不再被強制拉伸。為了對比我再給出一個使用 Flex 實現(xiàn)的同類卡片列表.card-list { display: flex; flex-wrap: wrap; gap: 16px; } .card { flex: 1 1 240px; max-width: 100%; }粗看效果差不多但細(xì)節(jié)有差異Flex 換行后每一行內(nèi)部的對齊與間距依賴justify-content最后一行卡片少時會出現(xiàn)“左對齊但右側(cè)留白”的正常效果而 Grid 的行軌道是嚴(yán)格對齊的最后一行卡片不足時也會和上面的行共享相同的列寬。排版上 Grid 更整齊但也更需要明確每張卡片的寬度策略。實際項目中我是這么分工的整體框架用 Grid導(dǎo)航菜單、按鈕組、卡片內(nèi)部細(xì)節(jié)用 Flex。比如頂欄里的用戶頭像和下拉菜單用display: inline-flex; align-items: center; gap: 8px;就能搞定但頂欄本身作為網(wǎng)格的一個區(qū)域的位置歸屬由 Grid 決定。3.3 響應(yīng)式媒體查詢與改道網(wǎng)格骨架在窄屏上往往需要重新設(shè)模板。最直接的方式是媒體查詢里覆蓋grid-template-columns和grid-template-areasmedia (max-width: 768px) { .layout { grid-template-columns: 1fr; grid-template-areas: topbar main sidebar footer; } }這個寫法相當(dāng)于把側(cè)邊欄從左側(cè)挪到主內(nèi)容下方。為什么放在下方而不是上方從用戶瀏覽習(xí)慣講手機屏幕寬度有限用戶更關(guān)心主內(nèi)容導(dǎo)航菜單放底部或者用抽屜觸發(fā)更合理。用grid-template-areas改道比 Flex 里調(diào)整order屬性直觀得多——你就是在換棋盤上的區(qū)域排布。如果你追求更高級的“免媒體查詢響應(yīng)式”可以嘗試給容器直接設(shè)置.layout { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-template-areas: topbar topbar sidebar main footer footer; }但注意repeat(auto-fill, ...)在這里不會自動把“側(cè)邊欄和主內(nèi)容”重新排成一行因為grid-template-areas寫死了每一行的區(qū)域數(shù)。所以“完全免媒體查詢”不太現(xiàn)實于這種大骨架布局骨架級的響應(yīng)式還得靠媒體查詢換模板。內(nèi)層卡片列表才是auto-fill大顯身手的舞臺。4. 常見問題排查與避坑經(jīng)驗4.1 為什么軌道會“憑空”多出來用grid-template-columns定義了 3 列但容器里放了 5 個項目第 4、5 個項目并不會報錯也不會溢出而是自動在網(wǎng)格底部生成新行。這些沒有顯式定義尺寸的行就叫“隱式軌道”。隱式軌道的尺寸由grid-auto-rows控制默認(rèn)是auto也就是按內(nèi)容高度。有時這會導(dǎo)致不是你想要的效果比如彈窗下方多出很長的空白。解決辦法是顯式聲明.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 160px; gap: 12px; }grid-auto-rows: 160px讓所有自動生成的行動軌道固定為 160px 高多出來的項也會按照規(guī)律排列整體版式看起來沉穩(wěn)許多。反過來如果你希望自動創(chuàng)建的列固定寬度用grid-auto-columns。排查隱式軌道的一個小技巧就是打開瀏覽器開發(fā)者工具的 Grid Overlay直接看網(wǎng)格線編號。如果看到的編號比grid-template里定義的軌道數(shù)多那多半就是隱式軌道在起作用。4.21fr和auto、minmax()怎么選1fr經(jīng)常被誤解成“等分內(nèi)容”其實它是“等分剩余空間”。剩余空間的計算邏輯是先減去所有固定尺寸軌道px、%、auto和gap再把剩下的按比例分給fr軌道。所以下面兩種寫法的效果完全不同/* 寫法A */ grid-template-columns: auto 1fr; /* 寫法B */ grid-template-columns: 1fr 1fr;寫法A里第一列寬度由內(nèi)容決定如側(cè)邊欄里的長菜單文本第二列吃掉所有剩余空間寫法B里兩列均分剩余空間如果第一列內(nèi)容特別長它會把第二列擠壓到內(nèi)容最小寬度以下嗎不會因為fr軌道也有最小內(nèi)容尺寸的限制但整體上兩列的起點位置和寬度分配邏輯就不一樣。想要兼顧“固定最小寬度”和“剩余空間分配”用minmax()grid-template-columns: minmax(200px, 1fr) minmax(320px, 2fr);這個布局的意思是第一列至少 200px第二列至少 320px剩余空間按 1:2 分配。這個寫法非常適合實現(xiàn)“左側(cè)圖標(biāo)列 右側(cè)內(nèi)容列表”的復(fù)合布局比手寫max-width和百分比要穩(wěn)得多。我自己的選型習(xí)慣是需要固定寬度如側(cè)邊欄 240px、頭像 48px直接用px。需要由內(nèi)容撐開寬度如頂欄里的一組標(biāo)簽用auto。需要吸收剩余空間、占據(jù)比例主內(nèi)容區(qū)、卡片列表的彈性列用1fr或minmax(..., 1fr)。提示不要讓所有軌道都是1fr或minmax至少保留一列固定寬度否則網(wǎng)格在極端窄屏下會出現(xiàn)內(nèi)容擠壓視覺上很不舒服。4.3auto-fit與auto-fill到底差在哪repeat(auto-fill, ...)和repeat(auto-fit, ...)是卡片列表響應(yīng)式的兩兄弟但行為有一點關(guān)鍵差異。auto-fill容器寬度足夠時會填滿所有可能軌道數(shù)即使某些軌道沒有項目也會保留軌道位置。所以“空的列”還會占位。auto-fit容器寬度足夠時會自動折疊掉那些空軌道讓已有項目拉伸占據(jù)整個容器寬度?？磦€小示例/* 容器寬 700px項目最小寬 200px */ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));容器能放下 3 個軌道200 * 3 2 * gap 632px 左右。如果只有 2 個項目auto-fill會保留第 3 列空軌道兩個項目在左右側(cè)留白auto-fit會折疊第 3 列把兩個項目拉伸并填滿整行。實際上的處理規(guī)則還要看有沒有剩余空間和1fr的配合但理解了“空軌道保留/折疊”語義后用起來基本不會出錯。做卡片列表時我默認(rèn)選auto-fit更優(yōu)雅做日歷、課程表這種需要嚴(yán)格占滿格子的場景auto-fill更內(nèi)聚。4.4 利用開發(fā)者工具調(diào)試網(wǎng)格寫 Grid 布局時我?guī)缀蹼x不開瀏覽器開發(fā)者工具的 Grid Overlay。以 Chrome DevTools 為例選中一個設(shè)置了display: grid的容器元素在 Elements 面板里元素標(biāo)簽旁邊會出現(xiàn)一個網(wǎng)格徽標(biāo)。點擊它頁面就會疊加顯示網(wǎng)格線、軌道編號和區(qū)域名稱。調(diào)試grid-template-areas時更有用它會用不同顏色的半透明區(qū)塊標(biāo)出每個命名區(qū)域你能一眼看出哪塊區(qū)域發(fā)生了重疊、哪個區(qū)域沒被正確匹配。邊緣的網(wǎng)格線編號也能輔助確認(rèn)grid-column: 2 / 4到底跨到哪。如果你發(fā)現(xiàn)某個項目沒有出現(xiàn)在預(yù)期位置先打開 Overlay 看編號再確認(rèn)項目的grid-row/grid-column是否寫錯了方向把 row 寫成了 column。這種錯誤比語法錯誤更難發(fā)現(xiàn)因為瀏覽器不報錯只是把項目放到自動排列的某個位置視覺上表現(xiàn)為“亂序”但 Grid Overlay 會幫你還原整個棋盤。還有一條經(jīng)驗grid-template-areas失效時項目會退回自動排列此時 Overlay 顯示的區(qū)域里沒有任何名字。遇到這種情況優(yōu)先檢查字符串行列數(shù)是否和軌道數(shù)一致以及是否有重復(fù)命名的非矩形區(qū)域。最后分享一個我自己的習(xí)慣變化。早幾年做頁面我都是先寫 DOM然后 Flex 一把梭遇到對齊問題再調(diào) justify 和 align改來改去效率很低。現(xiàn)在我做任何“有骨架感”的頁面第一件事是打開一個繪圖工具或者就在腦子里畫一個大方框先確定分成幾行幾列哪些區(qū)域要跨列哪些區(qū)域要固定寬度再用grid-template-areas落到代碼里。這就像是先把棋盤畫好后面每個模塊的落位都清楚。至于 Grid 和 Flex 的關(guān)系我一直覺得不是二選一。Grid 管大棋盤Flex 管棋盤內(nèi)部的棋子排列兩者配合用才是現(xiàn)代 CSS 布局的完全體。如果你目前只習(xí)慣 Flex建議給自己一個小挑戰(zhàn)下一次做后臺布局或者卡片網(wǎng)格時強制用 Grid 寫一遍踩幾次隱式軌道和min-width的坑之后基本就回不去了。