如何用display grid实现交替列数的响应式网格布局？

要实现一行3列、下一行2列循环交替的网格布局，可通过Grid的列跨度结合CSS选择器控制每行元素的宽度分配，具体方案如下：

核心CSS修改 #

.rowsContainer {
    display: grid;
    /* 基础设置为3列布局，列宽自适应，保留间距 */
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    justify-items: center;
    align-items: center;
    justify-content: center;
}

.card {
    width: 190px;
    overflow: hidden;
    position: relative;
}

.horizontal {
    height: 159px;
}

.vertical {
    height: 243px;
}

/* 控制每组第4、5个元素（对应第二行）各占1.5列，实现2列效果 */
.card:nth-child(5n + 4),
.card:nth-child(5n + 5) {
    grid-column: span 1.5;
}

原理说明 #

• 基础网格设为3列，确保第一行（第1-3个元素）默认显示3列。
• 通过nth-child(5n + 4)和nth-child(5n + 5)选择器，选中每5个元素里的第4、5个（即第二行的两个元素），让它们各自跨越1.5个列宽，3列空间刚好容纳2个元素，形成2列布局。
• 后续第6-8个元素回到默认1列宽度，重新组成3列，第9-10个再次触发2列，以此循环交替。

响应式适配（可选） #

如果需要在小屏幕上自动调整列数，可添加媒体查询：

@media (max-width: 768px) {
    .rowsContainer {
        grid-template-columns: repeat(2, 1fr);
    }
    .card:nth-child(5n + 4),
    .card:nth-child(5n + 5) {
        grid-column: span 1;
    }
}

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