CSS-сетка с определенными элементами посередине (вне сетки)

#css #css-grid

Вопрос:

Мне нужно создать страницу с использованием CSS-сетки в этом формате:

Все предметы имеют одинаковые размеры (400*250), обычно их четыре в ряд, но иногда некоторые из них, красные на картинке, должны располагаться посередине (по желанию заказчика!), так как их содержание важнее других.

Поэтому эти «красные» контейнеры, расположенные по горизонтали, должны математически разбить сетку 4x, и я не знаю, как это сделать.

На мобильном устройстве все они, независимо от того, должны быть в одной колонке.

Заранее спасибо.

Ответ №1:

Проверьте, действительно ли это то, чего вы хотите.

 .box-container{
        display: grid;
        align-items:center;
        justify-content:center;
        grid-template-columns: auto auto auto auto;
    }
    .box{
        width:150px;
        height:100px;
        border:5px solid #000;
        margin:10px 15px;
    }
    .box-imp{
        background-color:red;
        grid-column-start: 1;
        grid-column-end: 5;
        justify-self:center;
    }
  
  @media only screen and (max-width: 768px){
        .box-container{
            grid-template-columns: auto;
        }
        .box-imp{
            grid-column-start: 1;
            grid-column-end: 2;
        }
    }

 <div class="box-container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box box-imp"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box box-imp"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box box-imp"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

1. Большое спасибо @shotgun02 ! Именно то, что мне нужно :Д. Еще одна вещь, пожалуйста: как мне расположить все поля в одном столбце и заполнить ширину доступной страницы на мобильных устройствах ?

2. Привет, @HuqeDato . обновлен также ответ для мобильных устройств.