根据内容动态调整css网格列高度[重复]

Question

我正在尝试创建一个布局，其中包含动态内容的列，我想根据内容缩小或扩展这些列（很像 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>

Answer 1

您应该为内容中的 div 赋予一个类，以便您可以根据需要调整它们。通过在它们上设置最大宽度，它们将进入下一行。您可能还想使用“word-wrap: break-word;”以确保没有 div 溢出。

以下是您应该执行的操作的示例： W3Schools