如何使用CSS网格创建砌体布局？

Question

我有一个“网格”布局，我想对齐我的容器，这样当其中一个网格项的高度发生变化时，其他网格项的高度会移动到网格项下方。

CSS：

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

很难分享代码，但您可以使用

<div class=".grid-container">
   <div class=".grid-item">Hi</div>
   <div class=".grid-item">My</div>
   <div class=".grid-item">Name</div>
   <div class=".grid-item">Is</div>
   <div class=".grid-item">Carlos</div>
   <div class=".grid-item">You rock!</div>
</div>

示例如何工作：

我想要的：