CSS 中间有某些元素的网格（离网）

Question

我需要使用 CSS 格式的网格创建页面：

所有项目都是等尺寸的（400*250），一般是四个一排，但有时，其中一些，如图中的红色，必须放在中间（客户要求！）作为他们的内容比其他人更重要。

因此，这些 'red' 水平居中的容器在数学上应该打破 4x 网格，我不知道该怎么做。

在移动设备上，所有这些都在一列上。

提前致谢。

Answer 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>

CSS 中间有某些元素的网格（离网）

CSS grid with certain elements in the middle (off-grid)

css

css-grid