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