Есть контейнер, в нем 9 блоков. Через display: grid;
спозиционированы на странице в один ряд. При адаптировании мне надо чтобы 4 блока ушли на вторую строку и выровнялись по центру. (как будто теперь у нас 2 строки с display: flex; justify-content: center;
) Как это сделать?
.container {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-gap: 12px;
}
.box {
font-size: 24px;
line-height: 1.2;
border-radius: 12px;
width: 50px;
height: 50px;
background-color: darksalmon;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>