求助：实现交替占比的两行两列CSS Grid布局

要实现这种交替比例的双列Grid布局，核心是把网格列分为3等份（对应1/3和2/3的宽度比例），然后通过nth-child选择器精准控制每个帖子的列跨度，同时确保每行固定两个元素。

修正后的CSS代码 #

.latest-posts-block {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 分成3个等宽列，方便分配1/3和2/3比例 */
  gap: 1rem; /* 可选：添加帖子间的间距 */
}

/* 奇数行（第1、3、5...行）的第一个帖子：占1/3宽度 */
.latest-posts-block__post:nth-child(4n + 1) {
  grid-column: 1 / 2;
}

/* 奇数行的第二个帖子：占2/3宽度，填满当前行剩余空间 */
.latest-posts-block__post:nth-child(4n + 2) {
  grid-column: 2 / 4;
}

/* 偶数行（第2、4、6...行）的第一个帖子：占2/3宽度 */
.latest-posts-block__post:nth-child(4n + 3) {
  grid-column: 1 / 3;
}

/* 偶数行的第二个帖子：占1/3宽度 */
.latest-posts-block__post:nth-child(4n + 4) {
  grid-column: 3 / 4;
}

代码说明 #

• grid-template-columns: repeat(3, 1fr)：将网格横向拆分为3个等宽单元，1个单元对应1/3宽度，2个单元对应2/3宽度，完美匹配需求的比例分配。
• nth-child(4n + x)的逻辑：每4个元素为一组（对应2行），通过该选择器精准定位到奇数行、偶数行的每个帖子，控制它们的列跨度：
  • 4n+1：第1、5、9...个元素（奇数行第一个），占1列
  • 4n+2：第2、6、10...个元素（奇数行第二个），占2列
  • 4n+3：第3、7、11...个元素（偶数行第一个），占2列
  • 4n+4：第4、8、12...个元素（偶数行第二个），占1列
• 该写法无需硬编码行数，无论帖子数量多少，都会自动按规则换行并保持比例。

适配单元素收尾场景 #

如果最后一行只有1个帖子，默认会按它的位置规则占对应宽度，若想让它占满整行，可额外添加：

/* 当总帖子数为奇数时，让最后一个帖子占满整行 */
.latest-posts-block__post:last-child:nth-child(odd) {
  grid-column: 1 / 4;
}

内容的提问来源于stack exchange，提问作者in2d