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

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

頁頭？Flexbox。 卡片？Flexbox。 導航欄？Flexbox。 經典圣杯布局？Flexbox。

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

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

等一下，Flexbox 和 Grid 本質區別在哪？

我們直接把話說清楚：

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

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

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

「喂，給我8行8列，剩下的你自己看著辦。」

實際對比：卡片布局示例

比如我們構建一個簡單的卡片網格布局，用 Flexbox 會這樣：

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

換用 Grid 呢？

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

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

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

以下場景推薦用 Grid：

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

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

真實案例：經典圣杯布局（Holy Grail）

我們試一下經典布局：頁頭、側欄、主內容區以及頁腳。

用 Grid 實現：

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

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

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

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

• 用 Grid 完成整體大布局，Flexbox 則處理內部細節排版。

比如：

• 用 Grid 構建儀表盤整體框架
• 用 Flexbox 布局導航欄或卡片內元素

你不必忠于某一方，而應該根據實際需求混合使用兩者。

額外技巧：Grid 讓復雜布局簡單化

你是否需要跳過某些網格單元格、重疊元素，或在不改動 HTML 結構的前提下快速調整布局？Grid 可以輕松實現這些需求：

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

清晰的代碼，輕松的心態

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

「把元素放在這里，占據幾格，如何對齊。」

Grid 鼓勵你關注結構本身，而不是用各種 hack 方法繞過問題，讓你思路清晰，更易維護。

Grid 的不適用場景

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

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

但說實話，如果你正在開發現代應用程序，真的沒有理由不擁抱 Grid。