我怎样才能跨越数网格单元来创建一个不规则的布局，只使用一类（后馈入模块）？

Question

我想样式后馈送模块（迪维主题），使得第一列是50％宽度和7分别为25％的其余部分，创建这样https://www.screencast.com/t/GNJODhIG3栅格

我有这样的CSS代码电网到目前为止，但我找不到编辑它以获得所需的布局方式。

.ds-grid-blog .et_pb_ajax_pagination_container {
    display: grid;
    grid-template-columns: repeat(5, 18%);
    grid-column-gap: 2.5%;
}

是否有一些代码，我可以加入像“列一个，行之一：50％;”

Answer 1

随着网格，如果你打算分成n列，它不再是必要的（实际上是一个反模式）将自己计算的百分比，它是更好地使用fr单位，划分自由空间分割成分数。此外，你正在努力实现需要设置一个CSS规则，上面写着“容器的第一个孩子应该跨两行”。一个可能的解决方案的一个示例如下所示：

    .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 2.5%;
    grid-row-gap: 2.5%;
}
.container > :first-child {
  grid-column: 1 / 3;
}
.box {
  background-color: grey;

}

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