笔记&收藏&学习

Appearance

本文由 简悦 SimpRead 转码， 原文地址 mp.weixin.qq.com

当我第一次听说 CSS Grid 的时候，内心毫无波澜，甚至还想笑出声。

“这不就是又一个布局姿势嘛？Flexbox 不就够用了？”

结果后来啪啪打脸。因为 CSS Grid 根本不是个小工具，而是布局界的范式革命！

时光荏苒，如今我已经把它奉为网页布局的超级神器。但神奇的是，身边还是有不少开发者对 Grid 避之不及，觉得它太烧脑、没必要。

今天我就来和你唠唠，每个前端——不管你是小白还是大佬——都该掌握的 CSS Grid 十大真理。这些可不是纸上谈兵，而是我在生产环境里踩坑、掉坑、爬出来总结的血泪经验。

1. CSS Grid 是二维的（这可不是闹着玩的） ​

Flexbox 是一维的（横着来或者竖着来），Grid 则是二维的——横竖你都能拿捏。

这意味着你可以像下五子棋一样，随心所欲地在行和列之间排兵布阵，再也不用嵌套一堆 div，告别 “嵌套地狱”。

.grid {  display: grid;  grid-template-columns: 1fr 2fr 1fr;  grid-template-rows: auto 200px;}

用过你就知道，这种掌控感，简直让人欲罢不能。

2. 分数单位（fr）是你的灵魂伴侣 ​

先把 px、em、% 都放一边。

Grid 里的 fr 单位，意思是分数，用起来就像切蛋糕一样简单。

grid-template-columns: 1fr 3fr;

这就像 “我一口，你三口”，第一列 25%，第二列 75%，自适应分配，妈妈再也不用担心我算百分比了。

3. 不用再套娃式嵌套 div 了 ​

用 Flexbox 时，常常要嵌套一堆 “壳子” 才能搞定横竖布局。

Grid 让你直接定义区域，内容往里一丢，优雅又语义化：

grid-template-areas:  "header header"  "sidebar main"  "footer footer";

然后这样用：

.header { grid-area: header; }.sidebar { grid-area: sidebar; }

清爽、直观、再也不用 “div 汤” 了。

4. 显式网格 vs. 隐式网格，隐藏的超能力 ​

你只定义了几列，内容却超了？Grid 会自动生成行或列，这就是隐式网格。

还能自定义它的表现：

grid-auto-rows: 150px;

内容动态增长时（比如博客卡片、图片墙），这招简直救命。

5. Grid 和 Flexbox 是最佳拍档，不是死对头 ​

别再纠结 “选 Grid 还是 Flexbox” 了。

我一般用 Grid 搞页面大布局，组件内部用 Flexbox。

比如：

<div class="grid-layout">  <header>...</header>  <main>    <div class="flex-card">...</div>  </main></div>

Grid 像城市规划师，Flexbox 像室内设计师，强强联手，天下无敌。

6. minmax() 是响应式布局的魔法棒 ​

想让列能伸能缩，但又不至于太小？

用 minmax()：

grid-template-columns: repeat(3, minmax(200px, 1fr));

三列自适应，最小 200px，最大随便扩。响应式布局不用写媒体查询，妈妈再也不用担心我的代码。

7. 自动定位很丝滑，但你也能手动掌控全局 ​

默认情况下，Grid 会自动从左到右、从上到下排队。

但你可以像玩俄罗斯方块一样，随意指定位置：

.item {  grid-column: 2 / 4;  grid-row: 1 / 2;}

或者让它横跨多列：

grid-column: span 2;

不用 float，不用 clear，布局精确到像素，妈妈再也不用担心我的强迫症。

8. 用 gap 替代 margin，间距更优雅 ​

与其用 margin 隔开，不如用 gap：

.grid {  gap: 20px;}

更易管理，不会塌陷，四面八方间距都一致，强迫症福音。

9. 命名线和区域让代码像小说一样好读 ​

你可以给网格线命名，提升可读性：

grid-template-columns: [start] 1fr [middle] 2fr [end];

或者像这样定义区域：

grid-template-areas:  "nav nav"  "sidebar main"  "footer footer";

这样你的布局代码不仅能跑，还能一眼看懂，老板看了都说好。

10. 浏览器支持？稳如老狗！ ​

CSS Grid 已被所有主流浏览器支持，包括 Chrome、Firefox、Safari，甚至 Edge。

就连 IE11 也有部分支持（加点前缀）。

所以别再拿兼容性当借口了，这玩意儿早就不是 “前沿黑科技”，而是生产力工具。

✅ 最后的思考：Grid 如今比以往都重要 ​

Web 开发越来越组件化、响应式、易维护，CSS Grid 变得不可或缺。

它让你拥有强大、灵活、优雅的布局能力——而且代码还好读。

我的建议是：下次你写布局时，问问自己——这能用 Grid 搞定吗？ 很多时候，答案是肯定的。一旦用上，你就回不去了。

TL;DR: 10 Must-Knows About CSS Grid ​

    1. Grid is 2D; Flexbox is 1D.

  2. 2. fr units make proportional spacing easy.

    1. Say goodbye to wrapper divs with grid-template-areas.
    1. Implicit grids auto-adapt to your content.
    1. Use Flexbox inside Grid layouts.

  6. 6. minmax() + repeat() = responsive magic.

    1. Manual placement gives total control.
    1. Use gap, not margin, for spacing.
    1. Named areas make your code human-readable.
    1. Browser support? No problem.

TL;DR：CSS Grid 十大必知（中文总结） ​

    1. Grid 是二维的，Flexbox 只能一维走位。

  2. 2. fr 单位让空间分配像切蛋糕一样简单。

    1. 用 grid-template-areas，和嵌套 div 说拜拜。
    1. 隐式网格会自动帮你适配内容，省心省力。
    1. 页面用 Grid，组件内部用 Flexbox，强强联手。

  6. 6. minmax() 搭配 repeat()，响应式布局一把梭。

    1. 想怎么摆就怎么摆，手动定位随心所欲。
    1. 用 gap 管间距，比 margin 香一百倍。
    1. 区域命名让代码像小说一样好读。
    1. 浏览器支持？稳得一批，放心用！

你有关于 CSS Grid 的布局秘籍、踩过的坑或者灵感火花吗？评论区见，或者发推特一起唠嗑。让我们一起解锁这个被低估的宝藏吧！