网格布局对齐中心答案

【问题标题】：Grid layout justify center网格布局对齐中心
【发布时间】：2020-03-12 18:46:39
【问题描述】：

我想创建一个带有网格或弹性框的网格布局，如下图所示，如果项目换行，则第二行中的项目必须水平居中。我尝试了类似的方法，但它不起作用。

.custom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.content {
  width: 90px;
  height: 90px;
  background: red;
  margin: 20px;
}

<div class="custom-grid">
      <div class="grid-item">
        <div class="content">hello</div>
      </div>
      <div class="grid-item">
        <div class="content">hello</div>
      </div>
      <div class="grid-item">
        <div class="content">hello</div>
      </div>
      <div class="grid-item">
        <div class="content">hello</div>
      </div>
      <div class="grid-item">
        <div class="content">hello</div>
      </div>
    </div>

【问题讨论】：

你能添加一个工作代码sn-p吗？这将有助于解决您的问题。
@Ma'mounothman 我添加了一个 sn-p
sn-p（用 SO 来说）不同于代码块。在编辑器工具栏中查找按钮。

标签： html css sass flexbox css-grid

【解决方案1】：

诀窍是使用 wrap 和 justify-content。

.wrapper {
  display: flex;
  background: green;
  width: 150px;
  flex-wrap: wrap;
  justify-content: space-around;
}

.child {
  width: 50px;
  height: 50px;
  background: red;
}

<div class="wrapper">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

这是一个小提琴：https://jsfiddle.net/9qwa1r8u/1/

希望有所帮助:-)

【讨论】：

我猜空间环绕不太正确。这会在第二排留下一个更大的中心排水沟，不是吗？
我尝试了类似的方法，但我不喜欢为我的包装器使用固定宽度。
@isherwood 是的，确实如此。
@icyDog 固定宽度只是为了显示包装。它不需要修复。

【解决方案2】：

你可以试试下面这样的 flex 布局：

.grid {
  display: flex;
  flex-wrap:wrap;
  justify-content:center;
}
.grid  > div {
  flex:0 1 calc(100%/3);
  padding:10px;
  box-sizing:border-box;
}
.content {
  width: 90px;
  height: 90px;
  background:red;
  margin:auto;
}

<div class="grid">
  <div class="grid-item">
    <div class="content"></div>
  </div>
  <div class="grid-item">
    <div class="content"></div>
  </div>
  <div class="grid-item">
    <div class="content"></div>
  </div>
  <div class="grid-item">
    <div class="content"></div>
  </div>
  <div class="grid-item">
    <div class="content"></div>
  </div>
</div>

【讨论】：

这没关系，但我想保持项目之间的宽度和边距
@icyDog 使用网格项的填充