CSS Grid布局问题：动态文章交替排版需求及Elementor布局异常

核心思路 #

放弃原来的3列Grid布局，改用**65% + 35%**的两列结构，通过grid-row: span 2控制大项占据两行，让小项自动填充剩余位置，完美匹配循环布局需求。

完整CSS代码 #

/* 重置Grid容器布局 */
.rn-portfolio .elementor-grid {
    display: grid;
    grid-template-columns: 65% 35%; /* 直接使用需求的宽度比例 */
    gap: 20px; /* 可根据设计需求调整间距，比如15px/20px */
}

/* 奇数组的第一个大项：第1、7、13...个项目 */
.rn-portfolio .e-loop-item:nth-of-type(6n-5) {
    grid-row: span 2; /* 占据两行高度 */
}

/* 偶数组的第三个大项：第6、12、18...个项目 */
.rn-portfolio .e-loop-item:nth-of-type(6n) {
    grid-row: span 2; /* 占据两行高度 */
}

/* 设置大项内部容器高度 */
.rn-portfolio .e-loop-item:nth-of-type(6n-5) .elementor-section,
.rn-portfolio .e-loop-item:nth-of-type(6n) .elementor-section,
.rn-portfolio .e-loop-item:nth-of-type(6n-5) .elementor-container,
.rn-portfolio .e-loop-item:nth-of-type(6n) .elementor-container {
    height: 600px;
}

/* 设置小项内部容器高度 */
.rn-portfolio .e-loop-item:not(:nth-of-type(6n-5)):not(:nth-of-type(6n)) .elementor-section,
.rn-portfolio .e-loop-item:not(:nth-of-type(6n-5)):not(:nth-of-type(6n)) .elementor-container {
    height: 300px;
}

问题原因说明 #

你之前用grid-template-columns: repeat(3,1fr)的3列布局，第二组的大项（第6个）设置grid-column: span 2后，会从第2列开始占据两列，但此时第4、5个小项已经占了第1、2列，导致第3列出现空白，大项只能被挤到下方，最终布局错乱。改成两列结构后，Grid会自动按需求排列元素，彻底解决空白和错位问题。

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