符合内容

Question

我想创建一个自动网格，而不是确切地指定了多少行和列。

然后每个网格单元格足够宽以适应内容（自动）。 然后如果网格不够宽以适应3个cols，那么如果有2个cols，如果不足够2个cols，那么它将有1个col等，等等。 然后，如果不足够宽1 col，那1 col将被限制为100％宽度（没有水平滚动）。

我认为你可以使用弹性框执行此操作，其中flex-item将限制为100% max-width，并且flex-wrap将被启用，因此如果足够宽，它将适合1行中的所有内容，但是如果不够宽，则换行到下一行，直到只有1个flex项目，并且该项目将限制为100％宽度。但那么css网格布局的重点是什么？

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

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

更新：代码：

.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

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

示例：

public String checkEmail(){
String userEmail = "";
for(int i=0; i<trainers.size(); i++){              
    for(int j=0; j<trainers.get(i).size(); j++){   
        userEmail = userEmail + trainers.get(i).get(j);
    }


}
return userEmail;
}