1. 为什么我劝你尽早把 float 和 flex 换成 grid做了七八年前端我经历过用 table 布局切页面的年代也熬过 float 清浮动清到怀疑人生的阶段后来 flex 出来的时候觉得终于得救了。但真正让我改变布局思维的是 grid。大概两三年前接手一个后台管理系统的重构几十个页面全是 flex 嵌套 flex一层套一层改一个间距要翻三层结构调一个对齐要加一堆 margin。那次之后我下定决心把 grid 彻底吃透现在新项目只要涉及二维布局我基本首选 grid。这篇文章不是那种把 MDN 文档翻译一遍的教程我想从一个实际使用者的角度把 grid 的核心思路、关键参数、实操步骤和踩过的坑都讲清楚。不管你是刚接触 CSS 布局的新手还是用了几年 flex 想升级的老手应该都能从里面找到能直接抄作业的东西。核心关键词就一个CSS display:grid 网格布局。我会围绕它把该讲的都讲透包括它到底解决了什么问题、什么时候该用它、怎么用才不踩坑。先说结论grid 是 CSS 里第一个真正为二维布局设计的方案。flex 是一维的它擅长处理一行或者一列里的排列而 grid 天生就是行列同时控制的。你想想一个仪表盘页面上面有导航、侧边栏、主内容区、底部中间还要放几个卡片这种既有行又有列的复杂结构用 flex 你得嵌套好几层用 grid 可能一个容器加几行 CSS 就搞定了。这就是它的价值所在。2. 先把 grid 的核心概念捋清楚2.1 网格容器和网格项父子关系是关键用 grid 的第一步是在父元素上声明display: grid或者display: inline-grid。这个父元素就叫网格容器它的直接子元素自动变成网格项。这里有个新手最容易踩的坑只有直接子元素才是网格项孙子元素不算。我见过有人把display: grid加在容器上然后纳闷为什么深层嵌套的元素没按网格排原因就在这。.container { display: grid; }就这么一行容器里的直接子元素就进入了网格布局模式。默认情况下它们会排成一列每个占一行因为还没有定义列。这跟 flex 默认排成一行是反过来的这点要注意。2.2 行、列、轨道、单元格用表格来理解最快grid 的术语听起来多其实用 Excel 表格类比一下就全明白了。网格轨道就是行或列相当于表格的行高和列宽网格线是划分轨道的线从 1 开始编号网格单元格是行和列交叉出来的最小格子网格区域是若干个单元格组成的矩形块。我一般跟新人解释的时候会说你就想象一张方格纸grid-template-columns决定竖着切几刀、每刀多宽grid-template-rows决定横着切几刀、每刀多高。切完之后每个小格子就是一个单元格你可以让某个元素横跨几格、竖跨几格。这个心智模型建立起来之后后面所有属性都好理解了。2.3 fr 单位grid 里最值得掌握的新东西fr是 grid 引入的弹性单位全称 fraction意思是份。它跟百分比不一样的地方在于fr是在分配剩余空间而且会自动考虑 gap 的占位。举个例子.container { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 16px; }这表示把容器宽度减去两个 16px 的间隙之后剩下的空间按 1:2:1 分给三列。中间那列是两边列的两倍宽。用百分比你得自己算 gap用 fr 完全不用操心这是它最爽的地方。我实测下来只要涉及等分或者按比例分列fr 基本是首选比 calc 加百分比省心太多。3. 核心属性逐个拆解附参数计算过程3.1 grid-template-columns 和 rows布局的骨架这两个属性定义了网格的轨道结构是 grid 的地基。写法很灵活可以混用固定值和弹性值.container { display: grid; grid-template-columns: 200px 1fr 1fr; grid-template-rows: 60px auto 80px; }上面这段的意思是第一列固定 200px后两列平分剩余空间第一行固定 60px 高第二行根据内容自适应第三行固定 80px。这种固定弹性的混搭在实际项目里特别常见比如侧边栏固定宽度、主内容区自适应。这里有个参数选择的经验能用 fr 就别用百分比。百分比在遇到 gap 的时候会溢出因为百分比是基于容器宽度算的不含 gap而 fr 会自动扣掉 gap。我早期就吃过这个亏三列各 33.33% 再加 gap结果直接撑破容器出现横向滚动条。3.2 repeat 和 minmax少写重复代码的利器如果要写很多重复的轨道repeat()能帮你省事/* 这两行等价 */ grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: repeat(4, 1fr);更实用的是配合auto-fill和auto-fit做响应式这个后面单独讲。minmax()则是给轨道设一个尺寸范围grid-template-columns: minmax(200px, 1fr) 3fr;意思是第一列最小 200px最大可以弹性到 1fr。当容器变窄时第一列不会小于 200px保证内容不被压扁。这个组合在做侧边栏的时候非常好用比写死宽度灵活。3.3 gap间距处理终于不用算 margin 了以前用 flex 或者 float间距全靠 margin还得处理最后一个元素的 margin 问题或者用:not(:last-child)这种选择器。grid 的gap直接解决这个痛点.container { display: grid; gap: 20px; /* 行列间距都是 20px */ gap: 20px 40px; /* 行间距 20px列间距 40px */ }gap 只在网格项之间产生间距不会在容器边缘多出间距所以不用做任何首尾元素的特殊处理。这一点比 margin 方案干净太多。我现在的习惯是只要用 grid间距一律用 gap绝不用 margin 去凑。3.4 grid-template-areas可视化布局的神器这是 grid 里我个人最喜欢的功能它让你用画图的方式定义布局.container { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 60px 1fr 50px; grid-template-areas: header header sidebar main footer footer; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }你看这个grid-template-areas它长得就跟页面布局一模一样谁看了都能秒懂。改布局的时候直接改这个地图就行不用去调每个元素的定位。做后台系统、仪表盘这种结构清晰的页面我强烈推荐用这个方式代码可读性直接拉满。唯一要注意的是每个区域必须是矩形不能是 L 形或者凹形否则无效。4. 响应式布局grid 最出彩的地方4.1 auto-fill 和 auto-fit 的区别一次讲明白这两个值经常让人混淆我用一个实际场景说清楚。假设你要做一排卡片希望容器宽就多放几张容器窄就少放几张卡片最小 250px.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }auto-fill的行为是尽可能多地塞下轨道哪怕某些轨道是空的。比如容器能放 5 张卡片但只有 3 张它会保留 5 个轨道的位置卡片靠左排右边留空。而auto-fit会把空轨道折叠掉让现有的卡片拉伸填满整行。所以如果你希望卡片撑满容器用auto-fit如果希望卡片保持固定节奏、不被拉伸用auto-fill。我踩过的坑是一开始没注意这个区别用 auto-fill 做卡片列表结果卡片少的时候右边一大片空白看着很别扭。后来换成 auto-fit 就正常了。这个细节文档里写得比较绕实际试一次就懂了。4.2 媒体查询配合 grid断点更少更清爽传统响应式要写一堆媒体查询每个断点重新定义列数。用 grid 的minmax加auto-fit很多时候一个属性就搞定了根本不用写媒体查询.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }容器宽就自动多列窄就自动少列全程无需断点。当然有些复杂布局还是得配合媒体查询但数量能大幅减少。我的经验是能用 auto-fit 解决的绝不用媒体查询代码量少一半维护起来也轻松。4.3 一个完整的响应式仪表盘布局实例把前面讲的串起来做一个仪表盘.dashboard { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: 64px 1fr; grid-template-areas: sidebar header sidebar main; height: 100vh; gap: 0; } media (max-width: 768px) { .dashboard { grid-template-columns: 1fr; grid-template-rows: 64px auto 1fr; grid-template-areas: header sidebar main; } }桌面端侧边栏在左移动端侧边栏跑到顶部只改grid-template-areas和列定义就行元素本身的位置完全不用动。这种改法比 flex 里调 order 或者改 DOM 结构优雅太多。实测下来这种写法在项目里维护成本极低新人接手也能一眼看懂布局结构。5. 实操中那些文档不会告诉你的坑5.1 网格项溢出问题min-width 的隐藏陷阱这是 grid 最经典的坑没有之一。当网格项里有长文本或者宽图片时即使你设了1fr它也可能撑破容器。原因是1fr的默认最小值是auto而auto的最小尺寸是内容的最小尺寸长单词或者不换行的内容会把轨道顶宽。解决办法是给网格项加min-width: 0.grid-item { min-width: 0; overflow: hidden; }或者用minmax(0, 1fr)代替1frgrid-template-columns: minmax(0, 1fr) minmax(0, 1fr);我第一次遇到这个问题的时候排查了半天以为是 fr 算错了后来才知道是auto最小值在作怪。这个坑几乎每个用 grid 的人都会踩一次记住min-width: 0这个解法就行。5.2 隐式网格没定义的行列从哪来的如果你放了 10 个元素但只定义了 3 列那么多出来的元素会自动换行这些自动生成的行叫隐式网格。隐式网格的尺寸默认由内容决定但你可以用grid-auto-rows控制.container { grid-auto-rows: 100px; /* 隐式行统一 100px */ grid-auto-rows: minmax(80px, auto); /* 最小 80px可撑高 */ }我经常用grid-auto-rows: minmax(80px, auto)来做卡片列表保证每张卡片至少 80px 高内容多了自动撑开。如果不设这个隐式行的高度完全看内容容易出现高低不齐的情况。5.3 对齐属性太多一张表理清楚grid 的对齐属性确实多justify-*管水平align-*管垂直*-items管容器内所有项*-self管单个项*-content管整个网格在容器里的位置。我整理了一张表用的时候直接查属性作用对象控制方向常用值justify-items所有网格项水平start / center / end / stretchalign-items所有网格项垂直start / center / end / stretchjustify-self单个网格项水平start / center / end / stretchalign-self单个网格项垂直start / center / end / stretchjustify-content整个网格水平start / center / space-betweenalign-content整个网格垂直start / center / space-between记忆窍门items 管格子里的内容content 管格子本身。默认值都是 stretch所以网格项默认会填满单元格。想让内容居中用place-items: center一行搞定它是align-items和justify-items的简写。5.4 常见问题速查表问题现象可能原因解决办法网格项撑破容器fr 的 auto 最小值加 min-width: 0 或用 minmax(0,1fr)间距导致横向滚动用了百分比没算 gap改用 fr 单位布局区域无效区域不是矩形检查 grid-template-areas 每行长度一致子元素没进网格不是直接子元素确认元素层级或改用 subgrid隐式行高度乱没设 grid-auto-rows显式定义 grid-auto-rows卡片少时右边留白用了 auto-fill改用 auto-fit6. 我的实操心得和选型建议6.1 grid 和 flex 到底怎么选这个问题我被问过无数次。我的判断标准很简单看布局是一维还是二维。如果只是把一排按钮横向排列或者把几个元素纵向堆叠用 flex它更轻量、语义更合适。如果涉及行列同时控制比如整个页面框架、卡片网格、仪表盘用 grid。实际项目里两者经常混用这完全没问题。我常见的做法是外层页面框架用 grid 定大局里面的导航栏、按钮组用 flex 做细节排列。grid 容器里的网格项本身也可以是 flex 容器两者不冲突。别纠结必须二选一它们是互补的。6.2 浏览器兼容性现在还需要担心吗grid 的兼容性现在非常好了主流浏览器从好几年前就全面支持了。我这两年做的项目里grid 从来没遇到过兼容性问题。唯一要注意的是subgrid这个特性支持得晚一些如果你的项目要兼容较老的浏览器用之前查一下。但基础的 grid 功能放心用不用加前缀也不用准备降级方案。6.3 调试技巧让布局问题无处遁形调 grid 布局的时候浏览器开发者工具是你的好朋友。在元素面板里grid 容器旁边会有个小 grid 图标点一下就能在页面上高亮显示网格线和轨道编号。这个功能我强烈建议每个用 grid 的人都用起来尤其是调grid-template-areas的时候高亮一开哪个区域在哪一目了然比对着代码猜快十倍。另外grid-template-areas里的字符串如果写错了整个布局会失效但不会报错很难发现。我的习惯是写完先在高亮模式下看一眼确认区域划分正确再往下做。6.4 性能上的实际感受有人担心 grid 性能不如 flex我实测下来在正常项目规模下两者差异可以忽略。grid 的布局计算确实比 flex 复杂一点但现代浏览器的渲染引擎优化得很好除非你在一个页面里塞几千个网格项否则感受不到差别。我做过一个几百张卡片的列表页用 grid 和 flex 分别实现滚动和渲染都很流畅没有明显区别。所以选型的时候优先考虑代码可维护性和语义性能不用过度纠结。6.5 一个容易被忽略的细节grid 的自动放置算法当你没有显式指定每个网格项的位置时grid 会按自动放置算法来排。默认是行优先从左到右、从上到下填。你可以用grid-auto-flow改变这个行为.container { grid-auto-flow: row; /* 默认按行填 */ grid-auto-flow: column; /* 按列填 */ grid-auto-flow: dense; /* 紧凑模式填补空洞 */ }dense这个值挺有意思它会让后面的小元素去填补前面留下的空洞。做图片瀑布流或者不规则卡片布局的时候有用但要注意它可能打乱元素的视觉顺序对可访问性有影响用之前想清楚。我一般只在纯展示、不涉及交互顺序的场景才用 dense。7. 从零搭一个完整布局的实操记录7.1 需求拆解和结构规划假设要做一个博客首页结构是顶部导航、左侧文章列表、右侧边栏、底部版权。桌面端三栏移动端单栏堆叠。我先把 HTML 结构写出来注意所有需要进网格的元素必须是容器的直接子元素div classlayout header classheader导航/header main classmain文章列表/main aside classsidebar侧边栏/aside footer classfooter版权/footer /div结构定好之后布局就全交给 CSS 了HTML 保持干净这也是 grid 的一个好处结构和样式分离得更彻底。7.2 桌面端布局实现.layout { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: 64px 1fr 60px; grid-template-areas: header header main sidebar footer footer; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 0 16px; min-height: 100vh; } .header { grid-area: header; } .main { grid-area: main; min-width: 0; } .sidebar { grid-area: sidebar; } .footer { grid-area: footer; }注意我给.main加了min-width: 0因为文章列表里可能有长标题或者代码块不加的话会把侧边栏挤变形。这个细节在实际项目里非常关键我每次都会顺手加上。7.3 移动端适配media (max-width: 768px) { .layout { grid-template-columns: 1fr; grid-template-rows: 64px auto 1fr 60px; grid-template-areas: header sidebar main footer; } }移动端把侧边栏提到主内容前面因为小屏幕上用户更可能先看分类导航。整个适配只改了grid-template-columns、grid-template-rows和grid-template-areas三个属性元素本身一行没动。这就是 grid 做响应式的威力改布局像改配置一样简单。7.4 文章列表用嵌套 grid 做卡片主内容区里的文章列表我再用一层 grid.article-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .article-card { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: 16px; border: 1px solid #e5e5e5; border-radius: 8px; }卡片内部用auto 1fr auto三行让标题和底部信息固定中间内容区自适应撑开这样一排卡片高度不一致时底部信息也能对齐。这个技巧我在做卡片列表时经常用比用 flex 加 margin-top: auto 更直观。8. 写在最后的一点个人体会grid 刚出来那会儿我也觉得属性太多、学习成本高一直没认真学。直到被一个复杂布局逼得没办法硬着头皮啃了一遍才发现之前用 flex 嵌套受的苦都是白受的。现在回头看grid 的学习曲线其实不陡核心就那几个属性真正难的是转变思维——从怎么把元素排成一行变成怎么把空间切成格子。我的建议是别一上来就想着把所有属性背下来。先掌握grid-template-columns、grid-template-rows、gap、grid-template-areas这四个就能应付八成以上的布局需求。剩下的auto-fit、minmax、对齐属性用到的时候再查。真正让你进步的是在实际项目里大胆用起来踩几个坑自然就熟了。最后分享一个小习惯每次写完 grid 布局我都会打开开发者工具的网格高亮看一眼确认轨道和区域都符合预期。这个动作花不了几秒钟但能帮你提前发现很多肉眼看不出来的问题。布局这东西看得见才改得准。