css grid. позиционирование строк

Question

Есть контейнер, в нем 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>

Answer 1

по идее гриды этого не делают, либо придётся костылить на гридах, лучше так и сделать:

    @media (max-width: 1200px) {
          .container {
             display: flex;
             flex-wrap: wrap;
             justify-content: center;      
 }
}

БЛОГ НА HUSL

css grid. позиционирование строк

Ответы (1 шт):