上周我刚从项目里删掉了一个 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。.grid { display: grid; gap: 1rem; /* 关键就在这一行 */ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }这一行代码的意思其实很直白浏览器会自动判断当前容器里最多能塞下多少列但前提是每一列最少要有300px宽如果空间不够它就自动换到下一行。换句话说你不是在手动规定“手机 1 列、平板 2 列、桌面 4 列”而是在告诉浏览器你自己根据空间判断尽量排别挤坏。它在页面里的样子[ 桌面端 ] ------- ------- ------- | 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 图的方式直接把布局“画”出来。.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; }视觉结构会非常清楚----------------------------- | HEADER | ---------------------------- | | | | SIDE | MAIN | | | | ---------------------------- | FOOTER | -----------------------------真正厉害的地方在哪里这段代码最妙的不是“能实现布局”而是可读性极强。你看一眼grid-template-areas就知道页面结构是什么同时它还是自解释的基本不需要额外文档。 而且如果你哪天想把 Sidebar 从左边挪到右边你甚至不需要改 HTML 结构只要改这一段字符串就行。这意味着什么意味着布局逻辑终于和 DOM 结构解绑了。 以前你为了排版不得不迁就标签顺序现在标签负责语义Grid 负责布局。两者各司其职清爽很多。3. “全幅内容” 布局文字居中图片和代码块铺满整屏你遇到的问题这种场景在博客、文档、教程页里特别常见。你希望正文保持居中宽度适中保证阅读体验可与此同时你又想让图片、代码块、某些强调模块突破正文宽度占满整个屏幕看起来更有张力。过去处理这种需求很多人会写一层又一层容器.wrapper里套.container里面再塞.section有时还要额外做满宽模块的“逃逸布局”。老实说这种写法又笨又难维护。更聪明的解法直接用 Grid 给页面定义三列左边留白、中间正文、右边留白。.article { display: grid; /* 三列留白 | 内容 | 留白 */ grid-template-columns: 1fr min(65ch, 100%) 1fr; } /* 默认所有子元素都进入中间列 */ .article * { grid-column: 2; } /* 但图片可以例外直接横跨所有列 */ .article img.full-width { grid-column: 1 / -1; }结构示意如下[ 1fr ] [ 65ch ] [ 1fr ] -------- | Text | -------- ---------------------------- | Full Width Image | ---------------------------- -------- | Text | --------这会带来什么变化最大的好处不只是视觉上更自由而是 HTML 结构会明显变平。你不再需要写一堆“为了包住另一堆”的容器。 页面层级更浅调试更轻松渲染路径也更简单。与此同时想让某个元素突破正文限制时也终于不用再单独开一套奇怪的布局 hack。这类写法在文章页、文档页、Landing Page、作品集展示页里都特别好用。总结一下如果你记不住全部细节可以先记住这三个对应关系RAM 模式适合卡片列表、商品网格、文章目录Template Areas适合后台、控制台、管理面板、应用外壳中间通道 两侧留白适合博客、文档、内容型页面浏览器早就进化了。 真正该升级的很多时候反而是我们的 CSS 习惯。过去那种“先装一个框架再学习它的栅格语法再用十几个类名去摆布局”的方式其实越来越像一种历史惯性而不是必要方案。所以你接下来最值得做的一件事真的很简单打开你的package.json看看里面是不是还躺着bootstrap、flexbox-grid或者某些你已经离不开、但其实很久没认真思考过的布局库。然后试着先拿项目里一个最核心的页面开刀把它的主布局换成上面的“圣杯布局”。你大概率会惊讶地发现 原来自己真正想写的布局代码并没有那么多。 真正该被删掉的反而是一大堆你曾经以为“必不可少”的东西。全栈AI·探索涵盖动效、React Hooks、Vue 技巧、LLM 应用、Python 脚本等专栏案例驱动实战学习点击二维码了解更多详情。最后CSS终极指南Vue 设计模式实战指南20个前端开发者必备的响应式布局深入React:从基础到最佳实践完整攻略python 技巧精讲React Hook 深入浅出CSS技巧与案例详解vue2与vue3技巧合集
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。.grid { display: grid; gap: 1rem; /* 关键就在这一行 */ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }这一行代码的意思其实很直白浏览器会自动判断当前容器里最多能塞下多少列但前提是每一列最少要有300px宽如果空间不够它就自动换到下一行。换句话说你不是在手动规定“手机 1 列、平板 2 列、桌面 4 列”而是在告诉浏览器你自己根据空间判断尽量排别挤坏。它在页面里的样子[ 桌面端 ] ------- ------- ------- | 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 图的方式直接把布局“画”出来。.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; }视觉结构会非常清楚----------------------------- | HEADER | ---------------------------- | | | | SIDE | MAIN | | | | ---------------------------- | FOOTER | -----------------------------真正厉害的地方在哪里这段代码最妙的不是“能实现布局”而是可读性极强。你看一眼grid-template-areas就知道页面结构是什么同时它还是自解释的基本不需要额外文档。 而且如果你哪天想把 Sidebar 从左边挪到右边你甚至不需要改 HTML 结构只要改这一段字符串就行。这意味着什么意味着布局逻辑终于和 DOM 结构解绑了。 以前你为了排版不得不迁就标签顺序现在标签负责语义Grid 负责布局。两者各司其职清爽很多。3. “全幅内容” 布局文字居中图片和代码块铺满整屏你遇到的问题这种场景在博客、文档、教程页里特别常见。你希望正文保持居中宽度适中保证阅读体验可与此同时你又想让图片、代码块、某些强调模块突破正文宽度占满整个屏幕看起来更有张力。过去处理这种需求很多人会写一层又一层容器.wrapper里套.container里面再塞.section有时还要额外做满宽模块的“逃逸布局”。老实说这种写法又笨又难维护。更聪明的解法直接用 Grid 给页面定义三列左边留白、中间正文、右边留白。.article { display: grid; /* 三列留白 | 内容 | 留白 */ grid-template-columns: 1fr min(65ch, 100%) 1fr; } /* 默认所有子元素都进入中间列 */ .article * { grid-column: 2; } /* 但图片可以例外直接横跨所有列 */ .article img.full-width { grid-column: 1 / -1; }结构示意如下[ 1fr ] [ 65ch ] [ 1fr ] -------- | Text | -------- ---------------------------- | Full Width Image | ---------------------------- -------- | Text | --------这会带来什么变化最大的好处不只是视觉上更自由而是 HTML 结构会明显变平。你不再需要写一堆“为了包住另一堆”的容器。 页面层级更浅调试更轻松渲染路径也更简单。与此同时想让某个元素突破正文限制时也终于不用再单独开一套奇怪的布局 hack。这类写法在文章页、文档页、Landing Page、作品集展示页里都特别好用。总结一下如果你记不住全部细节可以先记住这三个对应关系RAM 模式适合卡片列表、商品网格、文章目录Template Areas适合后台、控制台、管理面板、应用外壳中间通道 两侧留白适合博客、文档、内容型页面浏览器早就进化了。 真正该升级的很多时候反而是我们的 CSS 习惯。过去那种“先装一个框架再学习它的栅格语法再用十几个类名去摆布局”的方式其实越来越像一种历史惯性而不是必要方案。所以你接下来最值得做的一件事真的很简单打开你的package.json看看里面是不是还躺着bootstrap、flexbox-grid或者某些你已经离不开、但其实很久没认真思考过的布局库。然后试着先拿项目里一个最核心的页面开刀把它的主布局换成上面的“圣杯布局”。你大概率会惊讶地发现 原来自己真正想写的布局代码并没有那么多。 真正该被删掉的反而是一大堆你曾经以为“必不可少”的东西。全栈AI·探索涵盖动效、React Hooks、Vue 技巧、LLM 应用、Python 脚本等专栏案例驱动实战学习点击二维码了解更多详情。最后CSS终极指南Vue 设计模式实战指南20个前端开发者必备的响应式布局深入React:从基础到最佳实践完整攻略python 技巧精讲React Hook 深入浅出CSS技巧与案例详解vue2与vue3技巧合集
