html - 根据内容动态调整CSS网格列的高度

This question already has answers here:

CSS-only masonry layout
（2个答案）
去年关门了。
我试图创建一个布局，其中我有列，与动态内容，我想缩小或扩大这些列根据内容（非常像pInterest）。
从我在网上看到的情况来看，大多数的例子，他们都有div，有背景色，他们向你展示了如何布局这些和展示漂亮的设计，但是当我尝试这样做和添加内容时，我遇到了这个问题。
任何暗示都是值得赞赏的。
这是我的代码：

body {
  color: #fff;
  font-family: 'Nunito Semibold';
  text-align: center;
}

#content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  max-width: 960px;
  margin: 0 auto;
}

#content div {
  background: #3bbced;
  padding: 30px;
}

#content div:nth-child(even) {
  background: #777;
  padding: 30px;
}

.nested {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  /*grid-column: span 3;*/
}

.nested p {
  border: 1px solid #fff;
  padding: 20px;
  margin: 0;
}

<div id="content">
  <div>I don't want to stretch that long</div>
  <div>me too</div>
  <div>3
    <p>Image or anything can be here .. Image or anything can be here .. Image or anything can be here .. Image or anything can be here .. Image or anything can be here .. Image or anything can be here .. Image or anything can be here .. Image or anything
      can be here .. </p>
  </div>
  <div class="nested">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
  </div>
  <div>5</div>
  <div>6</div>
</div>

最佳答案

你应该给内容中的div一个类，这样你就可以根据需要调整它们。通过设置最大宽度，它们将进入下一行。您还可以使用“单词包装：break word；”来确保div没有溢出。
下面是您应该做的一个示例：
W3Schools