交替两项行的网格布局问题

Question

我正在尝试找出一个网格布局，该布局始终有 2 个帖子在行中。 我希望行中的第一个项目占据大约 1/3 宽度，第二个项目占据 2/3 宽度，但是在下一行中，反之亦然。

这是一个布局示例

1/3 2/3
2/3 1/3
1/3 2/3
2/3 1/3

这不应该以任何方式进行硬编码，并且应该适用于任何数量的孩子。

我确实尝试过类似的方法和一些类似的解决方案

.latest-posts-block {
        display: grid;
        grid-template-columns: 1fr 2fr; 
    
        &__post:nth-child(4n + 1),
        &__post:nth-child(4n + 4) {
            grid-column: 1 / 2;
        }
    
        &__post:nth-child(4n + 2),
        &__post:nth-child(4n + 3) {
            grid-column: 2 / 3;
        }
    }

我不太清楚如何解决这个问题，也许有人以前解决过这个问题

Answer 1

我建议您阅读我的文章中的演示：https://css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers/#grid-patterns

.grid {
  display: grid;
  grid-auto-rows: 100px;
  grid-auto-columns: 1fr;
  grid-gap: 5px;
}
.grid :nth-child(4n + 1){
  grid-column: span 2;
}
.grid :nth-child(4n + 4){
  grid-column: 2/span 2;
}

/**/
.grid {
  max-width:600px;
  margin:auto;
  counter-reset:num;
}
.grid *{
  border:2px solid;
  font-size:30px;
  box-sizing:border-box;
  font-family:sans-serif;
  display:grid;
  place-content:center;
}
.grid *:before {
  content:counter(num);
  counter-increment:num;
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>