grid网格布局


grid网格布局

引言

参见

https://mp.weixin.qq.com/s/O9kcB5vcGQ9BA54P_uWkjw

https://mp.weixin.qq.com/s/SF2mb8dmVBhmfGuLnt_2KQ

简介

grid网格布局是一种二维布局模型，它将元素放置在一个二维网格中，每个元素占据一个或多个单元格。

grid网格布局可以帮助我们更好地控制元素的布局和位置，同时也可以提高页面的可访问性和可维护性。

gap

gap 属性是 row-gap 和 column-gap 的缩写；

.box {
	gap: row-gap | column-gap;
}

响应式布局

https://mp.weixin.qq.com/s/HtVex57lfsf49ImhHCgScg

根据屏幕宽度自动调整列数。

初始网格长这样：

.container {  
    display: grid;  
    grid-template-columns: 100px 100px 100px;  
    grid-template-rows: 50px 50px;  
}

<div class="container">  
  <div>1</div>  
  <div>2</div>  
  <div>3</div>  
  <div>4</div>  
  <div>5</div>  
  <div>6</div>  
</div>
  • 基础响应式：fr单位

CSS Grid引入了一个新单位fr（分数单位），它可以把容器分成任意份数。我们把每列宽度改为1fr：

.container {  
    display: grid;  
    grid-template-columns: 1fr 1fr 1fr;  
    grid-template-rows: 50px 50px;  
}

这样网格会把总宽度均分成三份。如果改成1fr 2fr 1fr，第二列就会比其他列宽一倍。

  • repeat()函数

这个函数可以更高效地定义行列：

.container {  
    display: grid;  
    grid-template-columns: repeat(3, 100px);  
    grid-template-rows: repeat(2, 50px);  
}
  • auto-fit属性

这个属性可以自动调整列数，使网格布局更灵活。

.container {  
    display: grid;  
    grid-gap: 5px;  
    grid-template-columns: repeat(auto-fit, 100px);  
    grid-template-rows: repeat(2, 100px);  
}
  • minmax()函数

这个函数可以设置网格项的最小和最大宽度。

.container {  
    display: grid;  
    grid-gap: 5px;  
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));  
    grid-template-rows: repeat(2, 100px);  
}

这样列宽最小100px，有剩余空间时会自动分配。

  • 添加图片

最后我们来添加图片，CSS设置图片自适应：

.container > div > img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
}

<div><img src="img/forest.jpg"/></div>

瀑布流布局-Masonry

https://mp.weixin.qq.com/s/lYe6md1Raaz34J78-VWQmQ

这种布局叫做瀑布流布局。像图文列表、相册展示、电商商品页这些地方，都特别爱用。

不过，过去如果你想用 CSS 实现这个效果，基本都得走些“旁门左道”：要么引入 Masonry.js 这类 JavaScript 插件，要么拿 CSS Grid 或 Flexbox 搞些变通写法。哪种都不轻松，出了问题还挺难查。

但现在，好消息来了——CSS 原生支持瀑布流布局了！

只需要加上一行 display: masonry，浏览器就能自动帮你排好那些“不规整”的元素。不用额外的库，也不用自己算高度，代码更简单，性能也更好。

  • 过去怎么实现瀑布流？

用 JS 插件，比如 Masonry.js、Isotope，或者用 Grid/Flexbox 做“伪瀑布流”是过去的主流方案。

这些方式虽然能实现效果，但都存在一些问题：

要引入额外的 JS 库，增加加载体积；
响应式布局调整时要重新触发 JS 计算；
写法复杂，容易出错或有兼容性问题。

于是，很多开发者一直在呼吁：CSS 能不能直接支持瀑布流布局？

  • CSS Masonry 的进化史

2017 - 2020：呼声初起

从 2017 年起，社区里就有不少开发者在 W3C GitHub 提案、issue 区呼吁 CSS 能原生支持 Masonry。那时候 Grid 刚火不久，但也搞不定这种不规则的“砖墙式”排布。

2020 - 2024：标准化争论

2020 年，CSS 工作组开始在 Grid Level 3 中正式探讨 Masonry 语法。很快，各大浏览器厂商也加入讨论：

Apple/WebKit 认为 Masonry 是 Grid 的一种变体，主张写法沿用 grid-template-columns: masonry；
Google/Chromium 认为它本质上与 Grid 不同，主张使用 display: masonry 作为新的布局类型。

争论持续了几年，最终折中的结果是：两个写法都可以支持。

2025：实验性支持上线

2025 年，Chrome 和 Edge 140 版本开始提供实验性支持：

可以用 display: masonry 直接实现瀑布流；
也可以在 Grid 中使用 grid-template-columns: masonry；
目前都需要手动在 chrome://flags 中开启 Masonry Layout 选项。

Firefox 和 Safari 也在积极跟进中，预计 2026 年将会稳定支持。

  • 原生 CSS Masonry 有哪些优势？

对比以往的 JavaScript 实现，原生 CSS Masonry 有不少优势：

更高的性能：浏览器引擎直接计算布局，省去了 JS 操作 DOM 的性能开销；
响应式更轻松：窗口大小改变时，浏览器自动处理重排，不需要再跑 JS；
更少的代码：不用引入库，不需要监听 resize，不需要手写复杂的布局逻辑；
加载更快：CSS 渲染无需等 JS 执行，页面打开即可展示完整布局。

Chrome 团队测试发现，在包含 100 个元素的瀑布流中，原生 Masonry 比 JS 方案加载速度快了大约 40%。

  • Masonry 的语法长什么样？

目前有两种写法，对应的是前面提到的两种思路：一种是把 Masonry 当作新的布局类型，另一种是把它作为 Grid 的扩展。

  • 写法一：display: masonry（目前主流，推荐）

这是现在 Chrome 先支持的写法，也是最简单直接的一种。像这样写：

.masonry {
  display: masonry;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

你可能注意到了，这里虽然用了 display: masonry，但 grid-template-columns 依然能用。这是因为 Masonry 继承了部分 Grid 的语法，用法也比较类似，基本不需要重新学习。

  • 写法二：在 Grid 中使用 masonry 值

还有一种思路，是把 Masonry 融进 Grid 的语法体系里：

.masonry {
  display: grid;
  grid-template-columns: masonry;
}

这种写法目前还在讨论中，还没正式定下来，未来有可能成为标准，但现在主流浏览器还没支持。

  • 怎么在浏览器中启用 Masonry？

目前这个特性还属于实验阶段，默认是关着的，需要手动开启：

使用 Chrome 或 Edge 140 及以上版本；
在地址栏输入 chrome://flags；
搜索「CSS Masonry Layout」；
启用这个功能，重启浏览器就生效了。
  • 基础用法

先来个最常见的场景：横向排列、列宽自适应、高度不固定的卡片流。

.masonry {
  display: masonry;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

这段代码会生成一个响应式的 Masonry 容器，每列最小 200px，浏览器会根据容器宽度自动安排放几列。

  • 行方向 Masonry 布局

默认 Masonry 是按列来的，但其实它也支持横向排列（即按行 Masonry）。

只要加上 masonry-direction: row 就行：

.masonry {
  display: masonry;
  masonry-direction: row;
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
  gap: 16px;
}

这在一些横向滚动的内容流、时间轴样式中会很有用。

  • 不指定列宽也能自动布局

一个很贴心的点是：你可以不写 grid-template-columns，浏览器也能自己安排列数。

.masonry {
  display: masonry;
  gap: 16px;
  /* 会自动创建多列，不需要手动指定 */
}

这在快速搭页面或者原型阶段非常方便，不需要先想列数、也不用定宽度，效果就已经很不错了。

  • 支持跨列元素

跟 CSS Grid 一样，Masonry 也支持让某些元素跨越多列或整行：

.masonry {
display: masonry;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}

.featured-item {
grid-column: span 2; /* 跨越两列 */
}

.full-width {
grid-column: 1 / -1; /* 占满整个宽度 */
}

这个特性对于制作博客、新闻页面、突出重点内容非常实用。

  • 简写属性：masonry

如果你觉得 grid-template-columns + masonry-direction 太啰嗦，也可以用官方提出的 masonry 简写：

.masonry {
  display: masonry;
  masonry: repeat(3, 200px) column;
}

等价于：

.masonry {
  display: masonry;
  masonry-direction: column;
  grid-template-columns: repeat(3, 200px);
}
  • 浏览器支持现状

主流浏览器在实验性支持和开发中。虽然还不能直接上线生产环境，但这已经是值得关注和试水的阶段了。

  • 最后

从 table 到 float，从 flex 到 grid，再到现在的 masonry，CSS 布局能力的每一次演进，都是在帮我们把“样式”这件事做得更优雅、更少依赖、更易维护。

CSS Masonry 的到来，不仅解决了一个老大难的问题，更意味着我们能用更少的代码、更优的性能，实现更丰富的页面表现。

虽然现在它还在实验阶段，但相信不久的将来，瀑布流布局会像 flex 一样，成为前端开发者的标配工具。






参考资料

https://mp.weixin.qq.com/s/O9kcB5vcGQ9BA54P_uWkjw

https://mp.weixin.qq.com/s/SF2mb8dmVBhmfGuLnt_2KQ

https://mp.weixin.qq.com/s/HtVex57lfsf49ImhHCgScg

https://mp.weixin.qq.com/s/lYe6md1Raaz34J78-VWQmQ

返回