CSS Grid 网格布局实战:fr 单位、gap 与二维布局怎么落地

写了几年页面,我越来越确信一件事:大部分布局之所以难,不是因为 CSS 不够强,而是因为你用错了维度。把一个本该二维的页面骨架硬塞进一维的容器里,然后靠 margin、绝对定位、负值去硬掰,代码越写越脏。CSS Grid 把"行"和"列"同时交到你手里,这件事比想象中省心。这篇我把 grid-template-columns、fr 单位、gap 这些常用件讲清楚,顺带聊聊什么时候该用 Grid、什么时候该用 Flexbox。

fr 单位:别再手算百分比了

fr 是 fraction,代表网格容器里"剩余空间的一份"。它最大的价值是,你不用自己算百分比,也不用担心 gap 把宽度算溢出。

举个最常见的主区加侧栏布局:

.layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
}

这里侧栏锁死 280px,主区吃掉剩下的全部宽度。注意 gap 是在 1fr 计算之前就被扣掉的,所以无论容器多宽,这两列加上中间 24px 的间距,永远刚好填满,不会横向滚动。如果换成 grid-template-columns: 75% 25%,你就得自己把 gap 算进去,稍不留神就溢出。

等分三列也是同理,grid-template-columns: 1fr 1fr 1fr,或者更省字的 repeat(3, 1fr)。想让某一列占双份就写 2fr 1fr 1fr,第一列永远是后两列的两倍宽。

gap:行间距和列间距可以分开调

gap 是我最推荐先记住的属性。它一行写完行列两个方向的间距:

• gap: 16px 行列都是 16px
• gap: 24px 16px 行间距 24px,列间距 16px
• 或者拆开写 row-gap: 24px; column-gap: 16px

补一个容易踩的坑:gap 和老写法 grid-gap 是别名,但 gap 是现代名字,而且在 Flexbox 里也能用。两个一起写没有意义,统一用 gap 就行。

一段真实的二维布局例子

光说不练没感觉,给一段我常用的圣杯布局,header 横跨整行,中间侧栏加主区,footer 收底:

.shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  gap: 16px;
  min-height: 100vh;
}
.shell > header { grid-area: header; }
.shell > nav    { grid-area: sidebar; }
.shell > main   { grid-area: main; }
.shell > footer { grid-area: footer; }

grid-template-areas 这块是 Grid 的杀手锏:你用 ASCII 字符串把布局"画"出来,相邻格子写同一个名字就合并成一个区域,子元素只要写 grid-area: header;,浏览器自动摆好。两个硬约束记牢,每个格子都得命名(空白用 .),每个区域必须是矩形,L 形不行。页面级骨架有五到十个区块时,这种写法的可读性吊打行号定位。

我自己第一次用命名区域改一个老项目的后台框架时,把原来三十多行的定位代码删到只剩上面这一段,后来调侧栏宽度只改 200px 一个数字,整个心智负担直接归零。这种"改一处全对"的体验,是手写定位永远给不了的。

CSS Grid 还是 Flexbox?一句口诀

这是被问最多的问题,其实判断很简单:

• Grid 是二维,同时管行和列,项目能同时跨行跨列。页面骨架、Dashboard 卡片墙、图片画廊这种"网格"用它。
• Flexbox 是一维,一排会换行的导航、一列堆叠的表单字段、一组标签,用它。

口诀就是:草稿纸上画格子能画出来的是 Grid,描述成"一排会自动换行的东西"的是 Flex。线上多数项目是 Grid 写外层页面骨架,每一格内部再用 Flex 排细节,两者组合用,从来不是二选一。想动手感受 Flexbox 的主轴、交叉轴、换行行为,可以去 Flexbox 在线调试器 拖一拖,看着对齐方式实时变,比读文档快。

直接生成 CSS,别从空白样式表起步

把列数、行数、fr 比例、gap、命名区域一个个手敲容易出错,尤其是响应式还要再写三套 @media。我现在的习惯是先在 CSS Grid 可视化生成器 里把列行拖出来、命名区域点一点,预览所见即所得,再一键导出原生 CSS、配套 HTML、Tailwind className、JSX style 对象或者 Sass mixin 五种格式里你需要的那种。三档断点(桌面、平板 ≤1024px、手机 ≤640px)各自画好,导出时自动套 @media,不用在三段 CSS 之间来回复制粘贴。所有配置还接在 URL 里,链接发给同事打开就是同一个网格。

把 Grid 的二维心智模型建立起来之后,你会发现很多以前要靠 hack 的布局,现在三五行就讲清楚了。

---

Made by Toolora · Updated 2026-06-13