根据内容

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设为类，以便根据需要进行调整。通过设置最大宽度，它们将进入下一行。您可能还想使用“自动换行：break-word;”确保div没有溢出。

以下是您应该做的事情的示例： W3Schools