适合内容的自动网格布局

Question

我想创建一个自动网格而不指定确切的行数和列数。

然后每个网格单元将足够宽以适应内容（自动）。 然后，如果网格不够宽以容纳 3 列，那么如果将有 2 列，如果不足以容纳 2 列，那么它将有 1 列，依此类推。 然后，如果宽度不足以容纳 1 列，则 1 列将被限制为 100% 宽度（无水平滚动）。

我认为你可以使用 flex box 来做到这一点，其中 flex-item 将被限制为 100% max-width，并且 flex-wrap 将被启用，因此如果足够宽，它可以将所有内容放在 1 行中，但会换行到下一行如果不够宽，直到只有 1 个弹性项目，并且该项目将被限制为 100% 宽度。那么css网格布局有什么意义呢？

我正在尝试使用grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));，但如果宽度小于 18em，您最终会出现水平滚动。如果你把它降低到 1 厘米，那么你总是会得到 1 厘米的小柱子，并且内容会溢出网格单元格。

我只是在学习网格布局，所以希望有人能帮助我。

更新：代码：

.wpr{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25em, 1fr));
  grid-gap: 1em;
}
.wpr > div{
  background-color: red;
}
img{
  width: 100%;
  display: inline-block;
  padding-bottom: 100%;
  background-color: blue;
}
.wpr > div:nth-child(1){
  grid-row: auto / span 5;
}

<div class="wpr">
  <div>
    A<br/>
    Author<br/>
    <img/>
  </div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
</div>

更新：插图：

理想情况下：

Answer 1

我建议不要使用弹性盒子，尽管最近越来越多的人使用它们，我只会让 div 彼此相邻对齐，这样你就可以创建一个具有所需宽度的 CSS 盒子：比如 100%或 50%，甚至将其简单地设置为“自动”。然后使用 display: inline-block;和浮动：左；在盒子上；这样你就可以有一个漂亮的布局，它会响应。

例子：

    .box1 {
        width: 49%;
        height: auto;
        float: left;
        overflow: hidden;
        margin: auto;
    display: inline-block;
    }

.box2 {
    width: 49%;
    height: autox;
    float: left;
    overflow: hidden;
    margin: auto;
display: inline-block;

}