正常而言，我们想要实现瀑布流布局还是需要花费一定的功夫的，即便是基于 grid 布局。在之前，我们通过 grid 布局，通过精细化控制每一个 grid item，也可以实现一些伪瀑布流布局：
<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> .g-container { height: 100vh; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(8, 1fr); } .g-item { &:nth-child(1) { grid-column: 1; grid-row: 1 / 3; } &:nth-child(2) { grid-column: 2; grid-row: 1 / 4; } &:nth-child(3) { grid-column: 3; grid-row: 1 / 5; } &:nth-child(4) { grid-column: 4; grid-row: 1 / 6; } &:nth-child(5) { grid-column: 1; grid-row: 3 / 9; } &:nth-child(6) { grid-column: 2; grid-row: 4 / 9; } &:nth-child(7) { grid-column: 3; grid-row: 5 / 9; } &:nth-child(8) { grid-column: 4; grid-row: 6 / 9; } }效果如下：
CodePen Demo -- CSS Grid 实现伪瀑布流布局
在上述 Demo 中，使用 grid-template-columns、grid-template-rows 分割行列，使用 grid-row 控制每个 grid item 的所占格子的大小，但是这样做的成本太高了，元素一多，计算量也非常大，并且还是在我们提前知道每个元素的高宽的前提下。
而在有了 grid-template-rows: masonry 之后，一切都会变得简单许多，对于一个不确定每个元素高度的 4 列的 grid 布局：
.container { display: grid; grid-template-columns: repeat(4, 1fr); }正常而言，看到的会是这样：
简单的给容器加上 grid-template-rows: masonry，表示竖方向上，采用瀑布流布局：
.container { display: grid; grid-template-columns: repeat(4, 1fr); + grid-template-rows: masonry; }便可以轻松的得到这样一种瀑布流布局：
如果你在使用 firefox，并且开启了 layout.css.grid-template-masonry-value.enabled 配置，可以戳进下面的 DEMO 感受一下：
CodePen Demo -- grid-template-rows: masonry 实现瀑布流布局
当然，这是一个最简单的 DEMO，关于更多 grid-template-rows: masonry 相关知识，你可以详细的看看这篇文章：Native CSS Masonry Layout In CSS Grid
CSS 容器查询（Container Queries）什么是 CSS 容器查询（Container Queries）？
在之前，对于同个样式，我们如果希望根据视口大小得到不一样效果，通常使用的是媒体查询。
但是，一些容器或者组件的设计可能并不总是与视口的大小有关，而是与组件在布局中的放置位置有关。
所以在未来，新增了一种方式可以对不同状态下的容器样式进行控制，也就是容器查询。在最新的 Chrome Canary 中，我们可以通过 chrome://flags/#enable-container-queries 开启 Container Queries 功能。
假设我们有如下结构：
<div> <div> <div>Title</div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus vel eligendi, esse illum similique sint!!</p> </div> </div>正常情况下的样式如下：
.g-container { display: flex; flex-wrap: nowrap; border: 2px solid #ddd; .child { flex-shrink: 0; width: 200px; height: 100px; background: deeppink; } p { height: 100px; font-size: 16px; } }结构如下：
在未来，我们可以通过 @container query 语法，设定父容器 .wrap 在不同宽度下的不同表现，在上述代码基础上，新增下述代码：
.wrap { contain: layout inline-size; resize: horizontal; overflow: auto; } .g-container { display: flex; flex-wrap: nowrap; border: 2px solid #ddd; .child { flex-shrink: 0; width: 200px; height: 100px; background: deeppink; } p { height: 100px; font-size: 16px; } } // 当 .wrap 宽度小于等于 400px 时下述代码生效 @container (max-width: 400px) { .g-container { flex-wrap: wrap; flex-direction: column; } .g-container .child { width: 100%; } }