从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更像是配合关系而不是竞争关系。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 class="dashboard"> <header class="header">顶部导航</header> <aside class="sidebar">侧边菜单</aside> <main class="main">主内容区</main> <aside class="panel">右侧信息面板</aside> <footer class="footer">底部版权栏</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。

兼容策略其实很固定：先判断项目面向的浏览器版本，如果必须兼容老内核，就把Grid用于不支持的风险较低的骨架场景，同时保留回退布局。网格虽然强大，但也不必为了炫技放弃基本兼容手段。

6. Grid与Flexbox协作：页面骨架归Grid，组件内部归Flex

6.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布局的正确姿势。实际项目中把两者结合起来用，比任何单一方案都顺手。