如何在 3 列模板中将 2 列居中答案

【问题标题】：How to centerd 2 columns in a 3 column template如何在 3 列模板中将 2 列居中
【发布时间】：2019-07-10 07:07:06
【问题描述】：

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

我检查了网格 CSS 的文档并尝试了许多不同的 CSS，但似乎没有任何效果。

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

【问题讨论】：

是否使用css flexbox 替代css grid？我认为这是一个更好的用例。
@ArnoTenkink 当然

标签： css grid multiple-columns

【解决方案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>

【讨论】：

【解决方案2】：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  justify-content: center;
  align-content: center;
}

.grid-container div {
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
</body>
</html>

【讨论】：

只有 2 个项目的那一刻，项目不会居中。它们将保持在左侧对齐
如果你想要动态然后使用 js 这个