css - 如何在 3 列模板中将 2 列居中

Question

我的网格部分有一个 grid-template-column 用于 3 列。但是这个内容是动态加载的，所以它有时有 2 列。当只有 2 列时，我试图将列居中

我检查了网格 CSS 的文档并尝试了很多不同的 CSS，但似乎没有一个像我想要的那样工作。

.wrapper {
    grid-template-columns: repeat(3,1fr);
    display: grid;
    align-items: stretch;
}
.items {
    display: block;
}

Answer 1

这是您期望的行为吗？ 关于 flexbox 的更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent {
  display: flex;
  justify-content: center;
}

/* Addition styling */
.parent {
 padding: 30px;
 background: lightgrey;
 opacity: 0.8;
}

.child {
 padding: 30px;
 text-align: center;
 background: black;
 margin: 10px;
 color: white;
 max-width: 300px;
}

<div class="parent">
  <div class="child">Column</div>
  <div class="child">Column</div>
</div>
<hr>
<div class="parent">
  <div class="child">Column</div>
  <div class="child">Column</div>
  <div class="child">Column</div>
</div>
<hr>
<div class="parent">
  <div class="child">Column</div>
  <div class="child">Column</div>
  <div class="child">Column</div>
  <div class="child">Column</div>
</div>