Question

我试图使网格中的某些列居中对齐，但是仅当容器中没有足够的项目导致其包装到多于一行的时候。包装纸插入时，物品应向左对齐。网格中的项目数是动态的，宽度指定为百分比。

我目前正在使用flexbox，但也查看过css-grid。我知道，如果项目少于行中的列数，可以通过向容器添加另一个类来轻松实现此目的，但是我正在寻找一种仅CSS的解决方案。我一直在寻找一种方法，以将包裹在另一行上的所有元素作为目标，并覆盖正当性内容，但是我认为我可能会以错误的方式进行处理。好像应该这么简单！

.grid {
  display: flex;  
  flex-wrap: wrap;
  justify-content: center;
  background: pink;
}
.column {
  width: 25%;
  height: 100px;
  background: green;
  border: 1px solid black;
  box-sizing: border-box;
}
.justify-left {
  justify-content: left;
}

<h2>How it looks with less than 4 items</h2>  
<div class="grid">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

<h2>How it looks with more than 4 items</h2>  
<div class="grid">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>
  
<h2>How it should look with more than 4 items</h2>  
<div class="grid justify-left">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

当没有足够的项目填满一行时如何在网格中居中

0 个答案: