别再盲目使用 Flexbox！有时候 Grid 更合适

「随便用 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。

前端AI·探索：涵盖动效、React Hooks、Vue 技巧、LLM 应用、Python 脚本等专栏，案例驱动实战学习，点击原文了解更多详情。

最后：

python 技巧精讲

React Hook 深入浅出

CSS技巧与案例详解

vue2与vue3技巧合集

VueUse源码解读