「隨便用 Flexbox 就行了」，每個(gè)開(kāi)發(fā)者都這么說(shuō)過(guò)

我承認(rèn)，以前我就是那個(gè)開(kāi)發(fā)者。 你知道的，就是那個(gè)總想用 Flexbox 解決所有布局問(wèn)題的人。

頁(yè)頭？Flexbox。 卡片？Flexbox。 導(dǎo)航欄？Flexbox。 經(jīng)典圣杯布局？Flexbox。

但現(xiàn)實(shí)情況是：Flexbox 從來(lái)就不是用來(lái)承擔(dān)所有布局任務(wù)的工具。 就像……雖然技術(shù)上可行，但用起來(lái)真的很痛苦。

今天我們聊聊 CSS Grid。它不僅僅是 Flexbox 的替代方案，而是專門(mén)為二維布局設(shè)計(jì)的強(qiáng)大工具。下面，我用通俗易懂的語(yǔ)言、搭配代碼示例，以及一點(diǎn)開(kāi)發(fā)者特有的吐槽式幽默來(lái)說(shuō)明這個(gè)問(wèn)題。

等一下，F(xiàn)lexbox 和 Grid 本質(zhì)區(qū)別在哪？

我們直接把話說(shuō)清楚：

• Flexbox 適合一維布局：你只能在行或列方向上排版。
• Grid 適合二維布局：你可以同時(shí)定義行和列，構(gòu)建復(fù)雜的二維結(jié)構(gòu)。

想象一下制作一個(gè)棋盤(pán)布局。用 Flexbox，你需要把 64 個(gè)方格一個(gè)個(gè)地?cái)D到單行里，或者用各種奇怪的 nth-child 技巧來(lái)堆疊行。

但用 Grid，你只需告訴瀏覽器：

「喂，給我8行8列，剩下的你自己看著辦?！?/span>

實(shí)際對(duì)比：卡片布局示例

比如我們構(gòu)建一個(gè)簡(jiǎn)單的卡片網(wǎng)格布局，用 Flexbox 會(huì)這樣：

• 你得處理百分比寬度、換行邏輯、間距問(wèn)題以及響應(yīng)式媒體查詢，痛苦不堪。

換用 Grid 呢？

• 不用計(jì)算，不用 hack 技巧，布局瞬間變得簡(jiǎn)單而優(yōu)雅。

那么，「什么時(shí)候該用 Grid？」

記住一個(gè)簡(jiǎn)單原則：如果布局涉及行列雙軸，直接用 Grid。

以下場(chǎng)景推薦用 Grid：

• 需要行和列同時(shí)對(duì)齊時(shí)
• 元素明確需要位于特定行或列中
• 希望自動(dòng)響應(yīng)布局，無(wú)需寫(xiě)媒體查詢
• 不想再被 .row, .column, .wrap, .no-wrap 等老舊框架的累贅纏繞時(shí)

說(shuō)實(shí)話，用 Flexbox 來(lái)實(shí)現(xiàn)多行多列布局就像走在懸崖邊的鋼絲上，一不小心就會(huì)掉進(jìn) CSS 的坑里。Grid 真的更好用。

真實(shí)案例：經(jīng)典圣杯布局（Holy Grail）

我們?cè)囈幌陆?jīng)典布局：頁(yè)頭、側(cè)欄、主內(nèi)容區(qū)以及頁(yè)腳。

用 Grid 實(shí)現(xiàn)：

• 非常清晰，語(yǔ)義明確，易讀易懂。不需要 nth-child，也無(wú)需復(fù)雜的順序控制。

試試用 Flexbox 實(shí)現(xiàn)吧，光寫(xiě)到第三個(gè)媒體查詢時(shí)你就頭疼了。

如果組件嵌套，該用哪個(gè)？

當(dāng)然，兩者是可以合作的伙伴，而不是相互排斥的敵人。

• 用 Grid 完成整體大布局，F(xiàn)lexbox 則處理內(nèi)部細(xì)節(jié)排版。

比如：

• 用 Grid 構(gòu)建儀表盤(pán)整體框架
• 用 Flexbox 布局導(dǎo)航欄或卡片內(nèi)元素

你不必忠于某一方，而應(yīng)該根據(jù)實(shí)際需求混合使用兩者。

額外技巧：Grid 讓復(fù)雜布局簡(jiǎn)單化

你是否需要跳過(guò)某些網(wǎng)格單元格、重疊元素，或在不改動(dòng) HTML 結(jié)構(gòu)的前提下快速調(diào)整布局？Grid 可以輕松實(shí)現(xiàn)這些需求：

• 精選文章橫跨三列，無(wú)需額外的容器或絕對(duì)定位，非常干凈清晰。

清晰的代碼，輕松的心態(tài)

開(kāi)發(fā)者在布局上經(jīng)常感到沮喪的原因，是因?yàn)閷?xiě)了太多指令式的 CSS。Grid 則鼓勵(lì)你寫(xiě)聲明式 CSS：

「把元素放在這里，占據(jù)幾格，如何對(duì)齊?！?/span>

Grid 鼓勵(lì)你關(guān)注結(jié)構(gòu)本身，而不是用各種 hack 方法繞過(guò)問(wèn)題，讓你思路清晰，更易維護(hù)。

Grid 的不適用場(chǎng)景

我們也不能盲目吹捧 Grid，以下場(chǎng)景還是建議避開(kāi)：

• 純粹單一維度的對(duì)齊（這屬于 Flexbox 的優(yōu)勢(shì)領(lǐng)域）
• 行內(nèi)文本布局（還是用 Flexbox 或 inline-flex 吧）
• 需要極寬的瀏覽器兼容性時(shí)（盡管目前 Grid 已廣泛支持，包括基本的 IE11）

但說(shuō)實(shí)話，如果你正在開(kāi)發(fā)現(xiàn)代應(yīng)用程序，真的沒(méi)有理由不擁抱 Grid。