Question

我一直试图将一个非常简单的CSS网格居中，但似乎无法解决问题-我希望当视口过小时，网格元素保持居中，但是其中一个要转到下一个线（它们在之前和之后居中）。

有人可以告诉我我在做什么错吗？

.Listing {
  list-style: none;
  display: grid;
  grid-gap: 10px;
  padding: 10px 40px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  padding-bottom: 30px;
  background-color: #71F;
  justify-content: center;
}

.Listing li {
  background-color: #F7F;
  border: solid 1px #dddddd;
  height: 150px;
}

<div id="Text">
  <ul class="Listing">
    <li>
      <div></div>
    </li>
    <li>
      <div></div>
    </li>
    <li>
      <div></div>
    </li>
  </ul>
</div>

Answer 1

您有固定的最小尺寸。 grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));

当您要求网格将尺寸调整为小于300px时，它将自动换行。

将您的最小尺寸更改为%或vh之类的相对单位以使其缩放。

Answer 2

我建议使用百分比，如上面布莱斯建议的那样。但是请记住，设置宽度时要考虑填充和边距。例如，在本例中，根据我的理解，在本例中，您希望将3个列表项显示在一行上。将百分比动态宽度设置为33％似乎是合乎逻辑的，但是我会/已经将其设置为31％，因为填充会将宽度稍微降低一点。旋转一下：

v-for

...
<div v-for="comment in comments">
...

Answer 3

好吧，我最终找到了一个解决方案，非常简单，但实际上并不优雅……：我只使用margin-left：50％；在第三个元素上。

它可以工作，但是如果有人有更优雅的解决方案，我将很高兴学习它。

再次感谢

居中对齐网格元素

3 个答案: