从table布局一路折腾到float、flex我做前端这些年布局方案换了一茬又一茬。第一次看到display: grid在页面上铺开一张规整的网格时说实话有点恍惚——这就是我折腾了多少个通宵想要的东西。CSS Grid网格布局现在大家习惯直接叫Grid解决的是二维布局问题行和列同时掌控。不用再像float那样为了两列等宽去精算百分比也不用像flex那样只能顺着一条主轴来回折腾。这篇里我想好好聊聊Grid不只是一份属性清单而是从定位原理到实战方案、从网格线的数法到翻车现场的完整梳理。适合已经会用flex、但面对复杂页面还是要反复调的人也适合刚学CSS布局、想一步到位把坐标系建立起来的新手。1. Grid布局的定位为什么二维网格是布局的终点1.1 从table时代到flex时代差的那口气到底在哪我做前端的头两年还在用table布局那时候三栏页面都是用嵌套表格拼出来的。table布局的问题不是它做不出效果而是改版太痛苦。今天侧边栏想挪到右边明天看板想加一列每一次调整都要动HTML结构表格嵌套一多浏览器渲染效率也直线下降。后来float布局出来了大家开始用div加float做版式但float本质是为图文绕排设计的拿来排版等于一直给CSS打补丁清浮动、算百分比宽度、处理栅格间隙每个方案都要靠经验补一堆边角规则。flex问世的时候我一度觉得解脱了。flex处理一排东西怎么排确实顺手弹性伸缩、自动换行、主轴交叉轴对齐导航栏、按钮组、卡片列表这些场景基本是降维打击。但用久了你会发现flex说到底是一维的它只关心主轴方向上怎么分配空间。一旦页面需要同时管行和列比如要做一个左侧目录、右侧正文、底部说明的经典页面用flex写出来的代码往往是层层嵌套加宽度计算还是回到了那种绕路的状态。CSS Grid网格布局把这口气补上了。Grid把容器划分成真正意义上的坐标系行列可以独立定义、项目可以跨行跨列放置整个版式不再依赖HTML的书写顺序。这让布局逻辑从顺着写下去变成了指哪放哪是本质差别。1.2 什么时候该用Grid一维与二维的分工判断学了Grid之后容易犯的毛病是什么都用Grid写。这里给一个我自己的判断标准简单粗暴如果内容沿着一条轴排列用flex如果内容需要同时落在行和列两个维度用Grid。场景推荐方案原因顶部导航、按钮组、标签栏flex一条主轴的排列与间距控制页面三栏骨架、宫格、看板、图库grid行列同时需要控制单行内等分如标签列表flex或grid皆可flex用flex:1更快grid用repeat也行卡片列表加内部图文排版grid外层 flex内层外层管网格位置内层管内容方向已知行数和列数的二维区域grid显式轨道 区域命名最直观用熟练之后flex和grid更像是配合关系而不是竞争关系。Grid负责大骨架flex负责小单元这个分工接下来在实战部分会详细展开。2. 声明容器与轨道先把网格骨架立起来2.1 display: grid只是起点轨道定义才是真正的骨架给容器加上display: grid只是开启一个网格上下文真正决定页面长什么样的是grid-template-columns和grid-template-rows这两条轨道定义属性。轨道可以理解成尺子上的刻度列轨道决定每一栏的宽度行轨道决定每一行的高度。有件事新手最容易忽略如果只写display: grid不写任何轨道那容器里所有项目会按默认规则落在同一行里一个接一个排下去。有人初学Grid时会觉得怎么跟flex差不多大概率就是忘了定义grid-template-columns。网格列轨道的定义决定了这一层布局的划分逻辑。举个例子.container { display: grid; grid-template-columns: 200px 1fr 200px; }这行代码的意思很直白左边固定200px右边固定200px剩下的中间部分全部给中间那一栏。这种两侧固定、中间自适应的布局用flex也能写但Grid的写法不需要计算flex-basis也不需要操心子元素的min-width语义更干净。如果列的数量比较多可以用repeat()函数简化.container { display: grid; grid-template-columns: repeat(4, 1fr); }这句等价于写了四次1fr也就是四列等分。repeat()的语法初看有点绕实际就是第一参数是重复次数第二参数是重复的轨道值。需要定义很多同宽轨道时这是最省事的写法。2.2 尺寸单位怎么分配fr、auto与minmax的取舍逻辑fr是Grid最核心的弹性单位它的工作是分配剩余空间。注意剩余这个前提——fr会把所有固定值先扣掉再去分剩下的空间。结合2.1的例子200px已经扣掉了剩下的1fr就是容器宽度减400px后的全部。auto轨道的行为则取决于内容内容多它就跟着大内容少它可以缩得很小。这个特性在部分场景有用比如根据文本长度自适应但也因为它受内容影响大在等分或撑满布局里经常出问题后面翻车章节会专门讲。minmax(最小值, 最大值)是真正体现Grid手感的地方。常见用法.container { grid-template-columns: minmax(220px, 300px) 1fr; }意思是第一列最小220px、最大300px第二列占据剩余空间。当容器宽度变化时第一列在220到300之间伸缩而不是直接随容器缩放这样侧边栏在窄屏下不会挤成一条细线。这个用途在做响应式布局时非常好用相当于给轨道装了保险丝。另一个被问很多的组合是minmax(0, 1fr)。同样是弹性占满它和直接写1fr有个隐蔽差异1fr等价于minmax(auto, 1fr)即弹性轨道的最小值是auto内容有多宽至少多宽而minmax(0, 1fr)允许轨道缩到0。用后者才能实现真正的等分避免长文本把轨道撑爆。这个差异留到第5章细说。2.3 间距和对齐别让项目挤在一起就完事轨道定义好了项目之间默认是紧密贴在一起的。要拉开间距用gap属性它同时管行间距和列间距.container { display: grid; gap: 16px 24px; }前一个值是行间距后一个值是列间距。写一个值时行列间距相同。注意gap只负责轨道之间的空隙不会给容器外围加边距所以通常还需要配合padding控制内容与容器边缘的距离。对齐方面Grid有两组容易混淆的属性justify-items/align-items管的是项目在自己的网格单元内怎么摆放justify-content/align-content管的是整个网格区域在容器里怎么摆放。前者解决的是项目内容撑不满单元格时的问题比如单元格比内容大、内容想靠左还是居中后者解决的是所有轨道加起来的宽度小于容器宽度时的问题比如三列都固定了200px在1200px宽的容器里网格整体想靠左还是居中。其中对齐玩法有一个小技巧想让项目在网格单元中完美居中不需要额外套一层flex直接.item { justify-self: center; align-self: center; }这个比写嵌套flex省一层DOM结构在按钮、图标这类单元素居中场景特别实用。3. 项目定位的两种思路数网格线 vs 给区域起名3.1 网格线编号规则从第1条线到第-1条线网格线是Grid体系里最底层的位置坐标。不管定义了多少列或多少行轨道之间必然存在一条条分割线。这些线有编号正数从1开始按顺序递增负数从末尾往前数。比如一个三列的网格列线从左到右是1、2、3、4从右到左则是-1、-2、-3、-4。项目定位就是通过grid-column和grid-row属性指定起始线和结束线.item { grid-column: 1 / 3; grid-row: 1 / 2; }这里1 / 3的意思是从第1条线开始到第3条线结束。第1条线到第3条线中间隔着两个轨道所以这个项目占据两列。网格线的编号从1开始而不是从0开始跟数组下标习惯不太一样刚开始用容易多算或少算建议打开DevTools的网格覆盖层边看边写。负数编号的实用场景是跨到最后两列不管总共有几列grid-column: -3 / -1就是占据倒数第3条线到最后一条线之间的两个轨道。这样写的好处是漏掉一列时不需要回头改数字。3.2 span扩展与隐式网格超出定义轨道之后的事直接写数字要算出每条线的编号有些人更习惯说我要跨两列这时候可以用span关键字.item { grid-column: 1 / span 2; }意思是起始于第1条线然后向后面扩展2个轨道。span不用关心结束线的编号在列数不固定或者动态场景中更直观。真正容易踩坑的是隐式网格。显式网格是你用grid-template-columns和grid-template-rows定义出来的轨道当项目的放置需求超出了显式网格能容纳的轨道数量浏览器会自动创建新的轨道来承接这些新轨道就是隐式轨道。比如你定义了3行但某项目经过grid-row: span 3之后又占据了一大块或者总项目数量超出了3行3列能装下的数量浏览器不会报错而是悄悄新增行或列。隐式轨道的高度默认是auto也就是由内容决定。这会导致一个现象上半部分的卡片是整齐的下一批自动生成的卡片高度参差不齐整个网格看起来像手动排版失败。控制隐式轨道尺寸用grid-auto-rows和grid-auto-columns。想让自动生成的行统一高度可以写.container { grid-auto-rows: minmax(120px, auto); }自动生成的行至少120px高内容超过就撑高。这样即使放置需求超出预期网格的节奏也能基本保持住。3.3 grid-template-areas把页面布局写成看得懂的草图数网格线的方式虽然精确但代码可读性一般。一个复杂页面读下来你很难一眼看出哪里是头部哪里是侧边栏。grid-template-areas给了另一种思路直接用字符串画出布局草图。先给每个区域在对应项目上命名.header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }然后在容器里用字符串定义区域排列.container { display: grid; grid-template-areas: header header header sidebar main main footer footer footer; grid-template-columns: 240px 1fr 1fr; grid-template-rows: 60px 1fr 40px; }这里每个引号是一行同一行里每个词是一列词与词之间的位置关系直接对应网格单元的位置。header横向占了三个单元sidebar占第一列main占了剩余两列。名字相同的区域会被当成同一个区域这样就实现了跨列。用grid-template-areas的好处是布局结构肉眼可读调整骨架时改字符串比改行号快得多。配合媒体查询切换区域排布也特别直观media (max-width: 768px) { .container { grid-template-areas: header main sidebar footer; } }窄屏下从三栏变成单列顺序可以完全不受HTML结构限制。移动端想让侧边栏出现在正文之后这在float和flex时代都要费不少劲但Grid里改一行字符串就行。4. 实战拆解一版后台管理框架的Grid实现4.1 一个后台管理框架的骨架搭建过程拿真实项目中最常见的场景举例——后台管理界面。先看HTML结构div classdashboard header classheader顶部导航/header aside classsidebar侧边菜单/aside main classmain主内容区/main aside classpanel右侧信息面板/aside footer classfooter底部版权栏/footer /div核心CSS如下.dashboard { display: grid; grid-template-columns: 220px 1fr 280px; grid-template-rows: 60px 1fr 40px; grid-template-areas: header header header sidebar main panel footer footer footer; min-height: 100vh; gap: 12px; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .panel { grid-area: panel; } .footer { grid-area: footer; }这个布局实现了顶部导航横跨全宽左侧菜单固定220px右侧信息面板固定280px中间主内容区弹性伸缩底部栏固定到底。整个骨架只用了两行核心声明没有浮动、没有负margin、没有百分比宽度计算。如果HTML结构里有个别元素不需要参与网格可以给它display: contents让它的子元素直接参与外层网格布局这样可以避免为了Grid多套一层无意义的div。这个属性在维护老页面时特别有用。4.2 响应式收缩的关键minmax、auto-fit与媒体查询后台框架在窄屏下需要整体收敛此时用媒体查询重写grid-template-areas是最稳的方案。但还有一种更自适的做法适合卡片墙、图库这类单元格高度和宽度都可变的场景.card-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }这行代码是Grid最让我上瘾的一句。它的意思是列数不固定每一列至少280px宽空间够就多放几列空间不够就自动换行。容器宽度小于一格时项目会自动降为单列不需要写任何媒体查询。这里需要说清楚auto-fit和auto-fill的区别很多人卡在这里。两个关键字的含义差别在于空轨道的处理auto-fill会保留空出来的轨道布局在窄屏下容易留白auto-fit会在项目填不满时将空轨道折叠为0让项目尽可能拉伸撑满。绝大多数页面场景用auto-fit更合适auto-fill反而会造成多余的空白列。要验证这一点建议打开DevTools改一下关键字实际对比空轨道的占据情况比看文档印象深得多。实际项目中auto-fit配合minmax的写法是自适应卡片墙的通用答案。动态列表、图片展示、商品卡片类需求基本可以无脑套这行。4.3 用DevTools的网格覆盖层把布局可视化调Grid布局的时候我最推荐的调试方式直接在浏览器DevTools里打开网格覆盖层。方法是在元素面板选中带有display: grid的容器DevTools会在元素后面显示一个grid标识点一下页面上就会出现网格线、轨道编号、区域名称的彩色覆盖层。这个覆盖层在早期Grid还没普及的时候救过我好多次。写grid-column: 2 / 4时不确定自己到底有没有跨对列覆盖层直接标出第2条线到第4条线的范围。区域名称对不上覆盖层直接把header、sidebar这些命名块高亮出来一眼就知道project到底坐落在哪个格子里。调试时有个小经验临时给项目加个高对比度的outline再配合覆盖层一起看网格线、项目边界、内容区域三个图层叠加之后几乎所有定位问题都能可视化定位出来。比在代码里来回改数字高效得多。5. 高频翻车现场Grid布局的坑与修复5.1 内容最小尺寸侧边栏突然把网格撑爆了先说一个我实际带的项目里发生的翻车事件一个后台系统的侧边栏菜单某个菜单名字特别长于是整个侧边栏被撑宽中间的主内容区被压缩到几乎看不见。当时第一反应是检查grid-template-columns有没有写错折腾了半天才发现根因是Grid项目有一个默认行为min-width: auto。在Grid布局中项目默认不允许小于其内容的宽度。内容有多宽轨道即使写了固定的220px也会被内容撑破。这个内容最小尺寸机制平时感受不到但遇到长文本、不可换行的URL、未设置最大宽度的图片时就会突然爆发。解决方案很直接给项目加上min-width: 0。这行代码允许项目收缩到比内容还窄的宽度轨道才能回归定义值.sidebar { min-width: 0; }这类问题在flex子项中也同样存在flex底下的子项默认也有min-width: auto。如果遇到明明设置了flex: 1还是被撑开的经典问题很多情况下就是缺了min-width: 0。把这个属性当成Grid和flex调试时的第一个怀疑对象能省下大把时间。5.2 fr不是等分的代名词minmax(0, 1fr)与minmax(auto, 1fr)的差别前面提过一句1fr等价于minmax(auto, 1fr)这里具体展开。很多人认为grid-template-columns: 1fr 1fr就是严格的两列等分。这句话在绝大多数情况下成立但只要某一列里有不可压缩的内容超长文本、大图、不换行的数字串那个轨道就会因为auto最小值而被内容撑大另一个fr轨道只能被压缩等分就会失效。项目明明写了overflow: hidden还是被撑开大概率是轨道层就锁定在auto最小值上了。预防方法就是显式指定可伸缩的区间.container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }或者更常用的混搭.container { grid-template-columns: 220px minmax(0, 1fr); }左侧固定右侧真正吃掉剩余空间且允许收缩到接近0不会因为内容被撑开。第5.1节的项目层min-width: 0和轨道层minmax(0, 1fr)是两种不同层面的修复实际遇到问题时经常要两层一起上。5.3 隐式行高度失控与grid-auto-flow的补洞逻辑还有一个现场也很常见Grid自动放置项目时经常会留下一两个空洞。原因是不同的项目占据了不同尺寸的轨道后续项目无法自然填入空隙。比如一个项目跨了两列下一个项目想放在它旁边但空间不够浏览器就把它丢到下一行原来的位置就空着。处理空洞的办法是grid-auto-flow: dense。这个属性允许网格回头把空洞填上后面的项目会优先往前挪。代价是DOM顺序和视觉顺序不再一致移动端或读屏场景要谨慎使用。如果项目本身是卡片、图片这类没有固定先后语义的内容dense的收益很高如果项目之间有明确的阅读顺序宁可留空也别乱序。隐式行高度的问题前面讲过了再补一个常见组合想让自动生成的行都保持同高统一设置grid-auto-rows。如果拿不准内容高度就用minmax给一个下限比如grid-auto-rows: minmax(100px, auto)。这个写法比写死grid-auto-rows: 100px更能兼顾内容超高的场景。5.4 浏览器兼容性处理别被老内核项目卡住Grid在现代浏览器里的支持已经非常完善从2017年起主流浏览器基本都支持无前缀的display: grid。如果你维护的项目需要兼容旧内核浏览器最需要警惕的是gap属性。早期浏览器只支持grid-gap后来才改成gap。遇到老内核项目时建议同时写上两种属性让现代浏览器识别gap旧内核回退到grid-gap。问题典型原因修复方案轨道被内容撑破项目默认min-width: auto项目加min-width: 0等分列实际不相等1fr含auto下限grid-template-columns改用minmax(0, 1fr)自动生成的行高度参差隐式行默认auto加grid-auto-rows: minmax(...)项目中内容超出轨道不换行文本/URL不可断行给项目加overflow-wrap或min-width: 0老内核浏览器gap不生效gap关键帧支持不足同时写grid-gap和gap或改用margin兼容策略其实很固定先判断项目面向的浏览器版本如果必须兼容老内核就把Grid用于不支持的风险较低的骨架场景同时保留回退布局。网格虽然强大但也不必为了炫技放弃基本兼容手段。6. Grid与Flexbox协作页面骨架归Grid组件内部归Flex6.1 分工套路Grid管版式Flex管组件内部Grid和flex在真实项目里不是二选一而是各管一段。以我实际做过的项目为例一个电商后台的订单管理页面页面整体骨架用Grid头部三块区域、左侧菜单、中间表格区、右侧快捷操作区全部由Grid定义行列位置但表格上方的筛选条件栏、表格操作列里的按钮组、卡片标题左侧的标签列表这些一排东西怎么排的局部区域全部用flex。这样分工的好处是大骨架调整时只改grid-template-areas字符串局部组件内部调整时只改flex的排列属性互不干扰。用flex的思路放进grid区域的坑在于grid区域内的项目默认会被拉伸至填满网格单元如果项目内部用了flex想要自主控制高度可能和网格单元的高度约束打架。遇到这种情况检查一下align-self或justify-self有没有被默认值干扰再决定是让网格单元让路还是让flex子项对齐。6.2 嵌套Grid的分层思路外层Grid负责版式内层Grid负责单元格内部再次切分这是Grid支持嵌套的正常玩法。比如后台首页外层Grid把页面切成头部、侧边栏、内容区内容区里又是一个新的Grid把卡片分成两列一排每张卡片内部再用flex处理标题与内容的纵向排列。层级越多越要克制不要想着一个Grid从页面到组件管到底否则改一行grid-template-columns影响的可能是一大片页面排查起来很酸爽。嵌套Grid的每一层应该只解决自己这一层的布局问题父子之间尽量只通过间距和尺寸关联。有几个实际注意事项内层Grid要注意重复设置gap不然子项之间会紧贴内层Grid项目的轨道宽度如果依赖父级fr分配别忘了min-width: 0的坑会逐层传递最内层的内容超长时整条链路上的网格轨道都可能被撑开。用下来的分层经验是外层管哪块区域放哪里内层管区域内部怎么排最内层的元素级对齐交给flex或text-align。这样每层职责唯一代码审读和后续维护都轻松得多。6.3 一个完整的落地建议最后分享一个偏实操的组合套路基本覆盖了日常项目里我认为最舒服的写法页面级布局用Grid特别是grid-template-areas结构一眼能看懂卡片列表、图片墙这类重复单元用auto-fit minmax(280px, 1fr)组件内部的一维排列用flex按钮组、标签组、筛选栏都用它需要跨行跨列的大区块直接用grid-row/grid-column span别嵌套太多层所有Grid和flex子项先默认加min-width: 0遇到被撑开问题回头检查这一项。Grid不是替代flex而是把布局能力补全了。二维问题用Grid解决一维问题用flex解决这才是现代CSS布局的正确姿势。实际项目中把两者结合起来用比任何单一方案都顺手。