开头用了“下围棋”的类比这个说法我很喜欢但说实话直到我自己在项目里真正把Grid用明白之后才觉得这个比喻有多贴切——围棋落子是在横竖交错的棋盘上做二维占位而CSS Grid网格布局就是让页面元素在“行线和列线”构成的网格棋盘上精准落子。过去几年做前端我经历过最原始的Table布局、浮动布局、定位布局再到Flexbox一统天下最后到Grid出现才终于有一种“这个布局系统是完整”的感觉。这篇文章我想把Grid网格布局从核心概念到实战技巧到那些文档里不会明说的坑一次讲透给正在学布局或者被Flexbox搞到头大的朋友一份可以直接照着做的参考。1. 布局演进与二维思维为什么Grid才是真正的王者1.1 从Table到Flexbox一维布局的局限性在Grid之前页面的布局方案其实一直在解决同一个问题怎么把元素放到该放的地方。但每种方案都有明显的短板。Table布局时代我们用表格的tr和td硬拼页面骨架结构臃肿不说语义混乱改一个位置要动整张表的结构后期维护基本上是噩梦。后来进入DIVCSS的浮动布局时代float本意是让文字环绕图片却被拿来当布局工具左右两栏靠float: left和float: right凑合高度塌陷要靠clearfix hack来修等分三栏还要拿百分比算来算去差一个边框像素整个布局就崩。Flexbox的出现解决了一维布局的很多痛点主轴和交叉轴的模型确实让水平垂直居中、等分排列这类需求变得非常优雅。但Flexbox本质上是一维的它只擅长处理“一行”或者“一列”的问题一旦你要同时控制行和列比如一个卡片区域既要保证三列竖对齐又希望某一行的高度能统一Flexbox就会变得非常别扭。你得在外层嵌套flex容器内层再用flex容器甚至要在每一项里手动设置宽度和margin来模拟网格效果。1.2 Grid的二维模型行与列的显式控制Grid网格布局最大的不同是它把“行”和“列”这件事提到了语言层面。你不用再通过计算百分比或复制粘贴宽度来做等分布局而是可以直接定义列轨道的数量和尺寸再定义行轨道的高度所有子项目自动按顺序填充到这些轨道组成的网格单元里。这种二维模型的直观感有点像在Excel里规划表格你知道第几列是侧边栏第几行是页头某个单元格跨几列一切都清清楚楚。Grid把这个能力原封不动搬到了CSS里而且比Excel更灵活因为轨道尺寸可以是固定的px、比例化的fr、内容自适应的auto甚至可以用minmax()做动态范围控制。用围棋来类比Flexbox像是你只能在一根线上排棋子要么横着排要么竖着排想兼顾两个方向的队形就很费劲而Grid给你的是一个真正的棋盘你把每个模块当作棋子想放哪个交叉点、想占多少格规则都由你自己定。有了这个工具之后复杂页面的布局结构不再是嵌套噩梦而是一张可以一眼看穿的规划图。2. 核心语法精讲从容器到项目的完整拆分2.1 容器级属性轨道、区域与间距Grid的语法体系并不难难的是你不知道每个属性该在什么场景下用。我建议把它分成两个维度容器级属性和项目级属性。容器级属性管的是“这个棋盘怎么画”项目级属性管的是“每个棋子在棋盘上怎么摆”。容器上最基础的一行代码就是display: grid声明之后这个元素就成为一个网格容器它的直接子元素自动变成网格项目。紧接着需要定义的是轨道尺寸.grid-container { display: grid; grid-template-columns: 200px 1fr 1fr; grid-template-rows: auto 300px auto; gap: 16px; }这里grid-template-columns定义了三列第一列固定200px后面两列各占1份剩余空间。1fr这个单位是Grid特有的弹性单位它代表“剩余可用空间的一份比例”两个1fr就是平分剩余空间跟百分比不一样的是fr在计算时已经扣除了固定轨道和gap所以你不会遇到“宽度总和超出容器导致换行”的问题。grid-template-rows同理定义了行轨道的高度auto表示由内容撑开比如页头和页脚通常是auto中间区域固定300px。gap取代了旧版的grid-gap一行gap: 16px同时设置了行间距和列间距如果行列间距不一致就写两个值gap: 20px 10px。这个属性是Grid和Flexbox共用的但它对Grid的意义更大因为网格的轨道间距直接影响整体对齐感。2.2 重复轨道与响应式利器repeat和minmax实际项目里你不会每次都手写六七个轨道值很常见的需求是“每行放四列”或者“列数随宽度自动变化”。这时候就得靠repeat()和minmax()组合出招。.grid-auto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .grid-responsive { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }第一种写法repeat(4, 1fr)就是最简单的四等分适合已知列数的场景。第二种写法就有意思了auto-fill意思是“容器能装几列就自动生成几列”每一列的最小尺寸是240px最大尺寸是1fr于是当容器变宽时列数自动变多变窄时自动变少全程不用写一个媒体查询。这是Grid实现响应式最爽的姿势。这里有一个容易混淆的点auto-fill和auto-fit的区别。auto-fill会尽可能多地创建空轨道哪怕有些轨道里没有内容它们也占着位置auto-fit会把空轨道收缩为0让已有内容尽量铺满容器。简单说如果你希望第一行不满时第二行元素能自动拉宽顶上来就选auto-fit如果你希望保留固定的轨道格子数用auto-fill。我自己的习惯是卡片列表用auto-fit因为视觉上更饱满。2.3 项目级属性十二宫格定位法容器画好棋盘之后每个网格项目默认是按顺序自动往格子里塞的这叫自动放置。但你肯定有想让某个元素占据特定位置或者跨越多行多列的时候这时候就得用项目级属性。.item-a { grid-column: 1 / 3; grid-row: 1 / 2; } .item-b { grid-column: 2 / 4; grid-row: 2 / 3; }grid-column和grid-row是简写属性完整写法是grid-column-start和grid-column-end。前面的数字代表哪根线开始斜杠后面是哪根线结束。这里特别容易搞混的是线的编号是从1开始的而且轨道和线是两回事。三列网格有4根垂直网格线grid-column: 1 / 3表示从第一根线开始到第三根线结束跨了2列。如果你嫌数字记起来麻烦还可以用span关键字来表意grid-column: span 2意思很直白就是横跨2列而不需要关心起止线号。.item-featured { grid-column: span 2; grid-row: span 2; }这种写法在实现“某张卡片特别大占两行两列”的瀑布式布局时特别顺手。除了线性定位Grid还提供了一个更语义化的方式把区域命名然后用grid-area引用。先看容器.page { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: 64px 1fr 48px; grid-template-areas: header header sidebar main footer footer; }然后每个子项目只需要一句grid-area: header或grid-area: sidebar就自动落到对应的格子区域。这种写法的巨大优势是可读性你看容器定义就能想象出页面的骨架长什么样。需要注意的一点是grid-template-areas定义的区域必须是矩形你没法画L形或不规则形状比如sidebar想跨两行但main只占一行这种区域划分在grid-template-areas里就实现不了得退回用grid-column和grid-row来做。我在项目里通常用命名区域搭大骨架用行列线做局部微调两种方式配合使用。3. 实战演练三个高频页面布局完整实现3.1 经典后台管理系统三栏布局后台管理系统是Grid最典型的应用场景因为这类页面的骨架高度固定左侧导航、顶部栏、内容区、底部信息。用Grid实现只需要10行以内的CSS。.admin-layout { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: 60px 1fr 40px; grid-template-areas: header header sidebar content footer footer; height: 100vh; gap: 0; } .admin-header { grid-area: header; } .admin-sidebar { grid-area: sidebar; } .admin-content { grid-area: content; overflow-y: auto; } .admin-footer { grid-area: footer; }这种布局以前用Flexbox也能做但你需要在外层flex纵向、内层flex横向还要给内容区设置flex: 1和overflow处理嵌套层级深了之后光看CSS根本反应不过来整体是什么结构。换成Grid的grid-template-areas之后即使是没写过这段代码的人看到那个ASCII风格的区域定义也能秒懂页面骨架。而且这个布局天然撑满整个视口因为外层容器固定高度为100vh。实际项目中套上真实业务之后唯一需要留神的是内容区。内容区内容很多时滚动条应该出现在content内部而不是整页所以给content设置了overflow-y: auto。如果你没做这个设置内容多了会把footer挤到底部视口之外后台系统那种“内容区独立滚动”的效果就没了。3.2 响应式卡片墙用auto-fill消灭媒体查询第二个高频场景是作品集、商品列表、仪表盘的卡片瀑布。以前做响应式卡片墙通常的做法是Flexbox配合flex-wrap和媒体查询在几个断点分别调整每行卡片数量。用Grid的auto-fill加minmax可以直接把这个响应式过程交给浏览器计算。div classcard-wall div classcard卡片1/div div classcard卡片2/div div classcard卡片3/div div classcard卡片4/div div classcard卡片5/div /div.card-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }这段代码的效果是当容器宽度在280px到560px之间显示一列在560px到840px之间显示两列每列宽度在280px到420px之间浮动容器越宽列数自动增多每列最大不超过1fr的弹性上限。整个过程中你不需要写一个媒体查询。这种做法的另一个好处是中间态的处理非常平滑不像媒体查询总是断崖式跳变——列数改变瞬间卡片宽度会突然变化而auto-fill的连续弹性让宽度变化是渐进的。如果你想确保最后一行不满时卡片也能自动拉伸填充替换成auto-fit即可。这个案例很适合直接抄进自己的项目不管是博客列表、商城产品还是后台的统计卡片这一段CSS基本都是通用的。3.3 不规则拼接布局让特色项目脱颖而出现在很多官网首页喜欢做那种交错感很强的信息展示区比如某张图片特别大占两行两列旁边几张小图排一列。这种布局用Flexbox做要嵌套好几层而且高度对齐很难控制。Grid解决这个需求几乎是量身定做。.works-showcase { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 120px; gap: 12px; } .work-item { border-radius: 8px; background: #e0e0e0; } .work-item.featured { grid-column: span 2; grid-row: span 2; } .work-item.tall { grid-row: span 2; } .work-item.wide { grid-column: span 2; }这里有一个关键细节grid-auto-rows: 120px。因为在自动放置模式下如果你不给行定义高度每一行的高度是由内容决定的想实现跨行的拼接效果就很难控。固定每行高度之后一个item跨两行就是稳稳的240px加一条间距所有元素都对齐得整整齐齐。这种拼接布局里最让人头疼的问题是自动放置的算法会“见缝插针”。比如元素B应该放在第一行第二列但那个位置已经被别的元素占了浏览器会自动把B放到下一个能放的位置结果视觉顺序和DOM顺序不一致。如果你希望视觉上按DOM顺序来可以给容器加grid-auto-flow: dense这个属性会命令算法回填前面的空洞让整体更紧凑。但要注意dense会打乱DOM顺序和视觉顺序的对应关系对屏幕阅读器和依赖Tab键导航的用户不友好所以我在导航类、表单类布局中坚决不用dense只在图片墙这种纯展示型区域使用。4. 避坑指南那些文档里没写清楚的细节4.1 fr、%、auto、minmax到底该怎么选很多新手看到轨道尺寸能用这么多单位直接懵了到底什么时候用fr什么时候用%什么时候让内容自己决定我曾经见过一个项目里同时出现grid-template-columns: 30% 1fr 30%结果中间那列的内容稍微多一点整个布局就溢出了。fr和%的本质区别在于fr计算的是“扣除固定轨道和gap之后”的剩余空间而%是容器总宽度的百分比。三列30%加10%的gap已经是100%了再加padding或者border总宽度必然超。而1fr会优先保证前两个30%轨道的固定占用剩下的全部留给中间列不会撑爆。所以我的建议是凡是需要弹性的列一律用fr需要固定宽度时用px只有你在做精确的百分比对称设计时才考虑%而且一定要留出gap的余量。至于auto它的意思是大小由内容决定。用在grid-template-rows: auto上非常合适尤其是页头页脚内容多高它就撑多高。但如果用在columns上auto列的行为有点狡猾内容宽的时候列会变宽内容窄的时候列会收缩成内容宽度而不是剩余空间经常导致布局重心偏移。所以列轨道需要弹性的场景直接写1fr更可控auto适合行轨道和少数内容自身定义宽度的列。4.2 隐式行这个隐形杀手Grid有个行为初学者几乎都会踩坑你定义了grid-template-columns为三列但没写grid-template-rows结果项目有6个自动放了2行这两行的高度不是你指定的而是默认的auto由内容撑开。这叫隐式行。此时如果你希望所有行高度一致或者有固定高度必须显式设置grid-auto-rows。.card-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; grid-auto-rows: 200px; }这样一来所有自动生成的行都是200px不会出现某张卡片因为内容多把整行撑得很高的问题。反过来如果你想让行高根据内容自适应就保持默认的auto不要画蛇添足。另外grid-auto-columns是控制隐式列的属性使用场景相对少但当你用grid-column: 5硬把项目放到第5列、而容器只定义了3列时就会触发隐式列它的宽度同样默认由内容决定。4.3 最小尺寸问题为什么内容把网格撑破了这是Grid实战里最神奇的一个坑。你明明写了grid-template-columns: repeat(3, 1fr)三个列的宽度应该均分结果某个列里面放了一段很长的英文网址或者一张大图这个列硬生生把其他两列挤扁了。原因在于Grid项目默认的min-width是auto意思是最小宽度不能小于内容的最小内容宽度。对于一段不可断行的长文本或一张固定宽度的图片这个最小内容宽度可能非常宽。解决办法是给网格项目设置min-width: 0针对水平方向溢出或者min-height: 0针对垂直方向溢出。我在实际项目中的经验是只要发现某个Grid项目内的内容把轨道撑爆了第一反应就是检查这个项目有没有设置min-width: 0九成问题都在这里。特别是项目里嵌了横向滚动表格和数据大屏这类内容时这句话几乎是必加的。5. 工程实践Grid在真实项目里的组织方式5.1 命名区域 vs 行列线团队协作的取舍我在团队协作中发现grid-template-areas虽然可读性好但它要求所有子项目都必须是容器的直接子元素你不能把某个区域再包一层容器来“绕过”区域命名。而且区域矩阵必须严格矩形某些复杂布局很难用区域名表达清楚。所以团队项目里我通常做这样一个分工页面的大骨架页头、侧边栏、内容区、页脚用grid-template-areas因为这几个区域命名后团队成员看代码就能理解结构页面内部的局部布局用grid-column和grid-row配合span因为局部模块的区块多、跨行跨列规则复杂数字化表达更精确。这里分享一下我封装栅格系统的经验。很多项目要求页面内容统一按12栅格对齐我之前用Flexbox实现过一套但总会遇到某一行元素高度不一致导致底部对不齐。换成Grid之后我封装了一个简化版栅格组件.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; } .col-8 { grid-column: span 8; }在使用时外层套.grid-12内层每个模块根据需要加.col-4或者.col-6之类的类名。相比传统栅格系统要写一堆带offset的类名这套写法干净很多而且天然支持换行一行放不下就自动折行网格线始终对齐。这套栅格已经在我最近几个项目中稳定跑了一年多。5.2 嵌套Grid与Subgrid的取舍Grid支持嵌套网格项目本身又可以是网格容器这个特性很多项目都在用。比如一个卡片列表是Grid布局每张卡片内部又是一个小Grid用来排标题、描述、按钮的位置。这种嵌套本身没毛病但有一个细节经常让人意外外层Grid的行轨道高度默认不会传递给内层Grid。意思是外层给每行设置了固定高度但内层Grid的grid-template-rows如果不写它的行高依然由自己的内容决定和外层的行高没有关系。如果想让内层Grid的行轨道跟外层保持联动就得用subgrid。subgrid可以让内层网格直接继承外层网格的行线和列线这样内外网格的轨道完全对齐。目前subgrid在现代浏览器里的支持度已经比较好了但使用时要明确一点不是所有嵌套场景都需要subgrid只有当你希望内层网格的行列线和外层完全对不齐的对齐时才用得上。像卡片内容布局这种各卡片自己有独立内部结构的场景反而没必要用subgrid保持各自独立更省心。6. 常见问题速查与个人心得6.1 问题速查表为了让你排查起来省事我把高频问题整理成了表格形式现象可能原因解决办法列数比预期少内容最小宽度撑破fr轨道给项目加min-width: 0间隙不一致有的模块自带margin统一用容器gap移除项目上的margin项目顺序乱跳网格自动放置 dense回填检查grid-auto-flow非展示型区域去掉dense行高不被预期撑开隐式行使用默认auto设置grid-auto-rows区域命名不生效grid-template-areas矩阵不是矩形或不连续每行字符串列数必须一致页面有横向滚动条项目内容总宽度超过容器检查是否有固定宽度的子元素加min-width: 0等分列但某一列特别宽该列项目设置了grid-column或内容撑开取消跨列检查min-width这张表基本覆盖了我在实操和社区帮人排查时见过的大部分Grid问题。每次项目里有人报Grid布局异常我按这几个方向排查几乎没有失手过。6.2 个人试着总结的经验项目用了两年多Grid最大的体会是Grid不是Flexbox的替代品而是互补品。页面级的大型骨架优先Grid因为它能同时控制行和列结构清晰组件内部的一维排列比如按钮组、导航链接、表单字段的排列用Flexbox反而更顺手。我见过很多初学者陷入一个误区学了Grid之后所有地方都用Grid结果一个列表顺序排放也用grid-template-columns搞半天其实Flexbox一行justify-content: space-between就解决了。工具没有高低之分适合的才是对的。另外想分享一个开发效率技巧代码编辑器里把Grid相关的几个核心属性做成代码片段真的能省很多打字时间。我个人的配置是输入grid再敲tab直接生成display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; 这样的基础模板后面再按需修改。做布局时我会先在浏览器里用开发者工具打开网格调试器处理所有网格线的高亮然后开始调各个项目的跨列跨行属性肉眼盯着网格线走基本不用来回刷新看效果定位问题快很多。最后我想说Grid是CSS里少有的那种“学十分钟能上手用一年还能有新发现”的特性。它让前端布局从“反复调和绕”变成了“直接声明结构”这种确定性的掌控感真的很像棋手面对棋盘的从容。希望你看完能直接打开编辑器试试把页面骨架用Grid重构一遍你会回来感谢我的。