3 个 CSS 网格布局，替代你的整个组件库

上周，我刚从项目里删掉了一个 CSS 框架。

它压缩后还有 140KB，里面塞满了成千上万行并不是我写的代码。更现实一点说：那些代码，我既没真正读懂，也根本没真正需要过。

可过去这十年，我们却几乎默认接受了一件事------为了做一件非常朴素的事情：让几个盒子排在另外几个盒子旁边，我们居然长期依赖 Bootstrap、Tailwind UI、Materialize 这一类库。

我们慢慢把自己说服了：布局很难。我们也慢慢把自己训练成：页面结构必须依赖所谓"栅格系统"。于是，12 栏、偏移、断点、col-md-6、col-lg-offset-4 这些名字，开始被包装成一种"专业感"。

但现在，你真的不需要这些东西了。

CSS Grid 已经被所有现代浏览器稳定支持。它的能力，比大多数布局库都更强；更重要的是，它足够直接。很多复杂、响应式、过去需要写很多辅助类和媒体查询的界面，现在往往只要两三行代码就能搭出来。

下面这 3 个模式，足够让你把大部分"布局型组件库"直接卸载掉。

1. "RAM" 模式：不用媒体查询，也能自动响应式

你遇到的问题

你想做一个卡片网格，比如商品列表、文章列表、项目卡片。

在手机上，你希望一列展示；到了平板，变成两列；再到桌面端，变成三列或者四列。以前遇到这种需求，很多人会本能地去写三套 @media，或者干脆往 HTML 上堆一长串工具类。

更简单的解法

这里用到的是一个非常经典的 Grid 写法：RAM ，也就是 Repeat、Auto、Minmax。

go 复制代码

.grid {
  display: grid;
  gap: 1rem;
  /* 关键就在这一行 */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

这一行代码的意思其实很直白：

浏览器会自动判断当前容器里最多能塞下多少列，但前提是每一列最少要有 300px 宽；如果空间不够，它就自动换到下一行。

换句话说，你不是在手动规定"手机 1 列、平板 2 列、桌面 4 列"，而是在告诉浏览器：你自己根据空间判断，尽量排，别挤坏。

它在页面里的样子

go 复制代码

[ 桌面端 ]
+-------+  +-------+  +-------+
| Card  |  | Card  |  | Card  |
+-------+  +-------+  +-------+


[ 移动端 - 自动换行 ]
+-------+
| Card  |
+-------+
+-------+
| Card  |
+-------+

它到底省了什么

传统 Bootstrap 思路通常需要：

外层 container
内层 row
每个子项再加不同断点下的列类名，比如 col-xs-12 col-md-4

而 Grid 的做法呢？

只需要 1 个 CSS 属性 。0 个媒体查询。

这不是"语法更潮"，而是你确实删掉了一整套本来没必要存在的复杂度。

2. "圣杯布局" 仪表盘：把后台结构直接"画"出来

你遇到的问题

经典应用布局其实一直都很烦人：顶部 Header、左侧 Sidebar、中间 Main、底部 Footer。

过去做这种结构，大家会在 float、flex-direction、position: fixed 之间反复折腾。更麻烦的是，一旦侧边栏高度变了，或者内容区域状态复杂一点，底部就很容易出问题。

更优雅的解法

CSS Grid 最迷人的地方之一，是它允许你用一种接近 ASCII 图的方式，直接把布局"画"出来。

go 复制代码

.dashboard {
display: grid;
height: 100vh;
grid-template-columns: 250px1fr; /* 侧边栏固定，内容区自适应 */
grid-template-rows: auto 1fr auto; /* 头部/底部自适应，中间区域撑满 */

grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

/* 把元素放进对应区域 */
header  { grid-area: header; }
aside   { grid-area: sidebar; }
main    { grid-area: main; }
footer  { grid-area: footer; }

视觉结构会非常清楚

go 复制代码

+-----------------------------+
|           HEADER            |
+--------+--------------------+
|        |                    |
|  SIDE  |       MAIN         |
|        |                    |
+--------+--------------------+
|           FOOTER            |
+-----------------------------+

真正厉害的地方在哪里

这段代码最妙的不是"能实现布局"，而是可读性极强。

你看一眼 grid-template-areas，就知道页面结构是什么；同时，它还是自解释的，基本不需要额外文档。而且，如果你哪天想把 Sidebar 从左边挪到右边，你甚至不需要改 HTML 结构，只要改这一段字符串就行。

这意味着什么？

意味着布局逻辑终于和 DOM 结构解绑了。以前你为了排版，不得不迁就标签顺序；现在，标签负责语义，Grid 负责布局。两者各司其职，清爽很多。

3. "全幅内容" 布局：文字居中，图片和代码块铺满整屏

你遇到的问题

这种场景在博客、文档、教程页里特别常见。

你希望正文保持居中，宽度适中，保证阅读体验；可与此同时，你又想让图片、代码块、某些强调模块突破正文宽度，占满整个屏幕，看起来更有张力。

过去处理这种需求，很多人会写一层又一层容器：.wrapper 里套 .container，里面再塞 .section，有时还要额外做满宽模块的"逃逸布局"。

老实说，这种写法又笨又难维护。

更聪明的解法

直接用 Grid 给页面定义三列：左边留白、中间正文、右边留白。

go 复制代码

.article {
display: grid;
/* 三列：留白 | 内容 | 留白 */
grid-template-columns: 1fr min(65ch, 100%) 1fr;
}

/* 默认所有子元素都进入中间列 */
.article > * {
grid-column: 2;
}

/* 但图片可以例外，直接横跨所有列 */
.article > img.full-width {
grid-column: 1 / -1;
}

结构示意如下

go 复制代码

[  1fr  ] [  65ch  ] [  1fr  ]
          +--------+
          | Text   |
          +--------+
+----------------------------+
|        Full Width Image    |
+----------------------------+
          +--------+
          | Text   |
          +--------+