「隨便用 Flexbox 就行了」，每個開發(fā)者都這么說過

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

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

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

今天我們聊聊 CSS Grid。它不僅僅是 Flexbox 的替代方案，而是專門為二維布局設(shè)計的強大工具。下面，我用通俗易懂的語言、搭配代碼示例，以及一點開發(fā)者特有的吐槽式幽默來說明這個問題。

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

我們直接把話說清楚：

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

想象一下制作一個棋盤布局。用 Flexbox，你需要把 64 個方格一個個地擠到單行里，或者用各種奇怪的 nth-child 技巧來堆疊行。

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

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

實際對比：卡片布局示例

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

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

換用 Grid 呢？

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

那么，「什么時候該用 Grid？」

記住一個簡單原則：如果布局涉及行列雙軸，直接用 Grid。

以下場景推薦用 Grid：

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

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

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

我們試一下經(jīng)典布局：頁頭、側(cè)欄、主內(nèi)容區(qū)以及頁腳。

用 Grid 實現(xiàn)：

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

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

如果組件嵌套，該用哪個？

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

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

比如：

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

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

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

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

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

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

開發(fā)者在布局上經(jīng)常感到沮喪的原因，是因為寫了太多指令式的 CSS。Grid 則鼓勵你寫聲明式 CSS：

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

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

Grid 的不適用場景

我們也不能盲目吹捧 Grid，以下場景還是建議避開：

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

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