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