Расположение сетки выравнивает центр

Question

Я хочу создать сетку с помощью сетки или флексбокса, как на изображениях ниже. Если элементы перенесены на новую строку, элементы во второй строке должны быть центрированы по горизонтали. Я пробовал что-то подобное, но это не работает.

.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>

Answer 1

Хитрость заключается в использовании переноса и выравнивания содержимого.

.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/

Надеюсь, что поможет: -)

Answer 2

Вы можете попробовать гибкий макет, как показано ниже:

.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>