0

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

2
  • 1
    почитайте тут
    – Alexandr
    5 окт 2021 в 12:34
  • спасибо, я понял что это бесполезно. буду делать флексы
    – Meth0d
    5 окт 2021 в 12:40

1 ответ 1

1

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

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.