Question

这是我一直苦苦挣扎的事情，但是我似乎找不到解决方法。

如果网格中的项目数量奇数，并且每行需要2个项目（1fr 1fr），则最后一行的最后一个项目将居左。我只想使其居中，这样看起来更好。

Answer 1

您可以尝试类似this jsfiddle的内容：

/* visibility properties */
body {
  width: 60%;
  margin: 5% auto;
}
div {
  margin: 3%;
  width: 100px;
  height: 100px;
  background-color: black;
  justify-self: center;
}
div:nth-of-type(2n) {
  background-color: red;
}

/* actual code: */
section {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#last-div {
  grid-column: 1 / span 2;
}

<section>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div id="last-div">
</div>
</section>

获取有关CSS网格的更多信息：complete-guide-grid

Answer 2

您可以尝试这样的操作，因为我在较早的一个项目中遇到了类似的问题。

grid-template-columns : repeat(auto-fit, minmax(<minSize>, 1fr));

将minSize设置为您希望元素占用的最小宽度。

将GRID最后一行中的剩余项居中（1fr 1fr）

2 个答案: