如何用CSS Grid实现指定数量子项后重排首列及响应式适配

核心通过CSS :nth-child() 选择器分别匹配前9个元素和第10个及之后的元素，手动指定网格行列位置，全程无需修改HTML结构。

完整CSS代码 #

/* 基础公共样式 */
.grid-list {
    display: grid;
    gap: 15px;
}
.grid-item .circle {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #aaa;
}

/* 桌面端样式：屏幕宽度≥768px生效 */
@media (min-width: 768px) {
    .grid-list {
        /* 6列布局：左3列放前9个元素，右3列放第10个及之后元素 */
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: auto;
    }
    /* 统一配置行位置 */
    .grid-item:nth-child(1),
    .grid-item:nth-child(2),
    .grid-item:nth-child(3),
    .grid-item:nth-child(10),
    .grid-item:nth-child(11),
    .grid-item:nth-child(12) {
        grid-row: 1;
    }
    .grid-item:nth-child(4),
    .grid-item:nth-child(5),
    .grid-item:nth-child(6),
    .grid-item:nth-child(13),
    .grid-item:nth-child(14),
    .grid-item:nth-child(15) {
        grid-row: 2;
    }
    .grid-item:nth-child(7),
    .grid-item:nth-child(8),
    .grid-item:nth-child(9),
    .grid-item:nth-child(16) {
        grid-row: 3;
    }
    /* 前9个元素列位置 */
    .grid-item:nth-child(3n + 1):nth-child(-n + 9) { grid-column: 1; }
    .grid-item:nth-child(3n + 2):nth-child(-n + 9) { grid-column: 2; }
    .grid-item:nth-child(3n + 3):nth-child(-n + 9) { grid-column: 3; }
    /* 第10个及之后元素列位置 */
    .grid-item:nth-child(3n + 1):nth-child(n + 10) { grid-column: 4; }
    .grid-item:nth-child(3n + 2):nth-child(n + 10) { grid-column: 5; }
    .grid-item:nth-child(3n + 3):nth-child(n + 10) { grid-column: 6; }
}

/* 移动端样式：屏幕宽度<768px生效 */
@media (max-width: 767px) {
    .grid-list {
        grid-template-columns: repeat(3, 100px);
        grid-auto-flow: column;
        grid-auto-columns: 100px;
        overflow-x: auto;
        /* 隐藏滚动条可选，不影响功能 */
        scrollbar-width: none;
    }
    .grid-list::-webkit-scrollbar {
        display: none;
    }
    /* 清除桌面端行列定位规则 */
    .grid-item {
        grid-row: unset !important;
        grid-column: unset !important;
    }
}

效果说明 #

• 桌面端完全匹配需求示例：前9个元素左半区3行3列排布，第10个元素从第一行右半区开始排列
• 移动端固定3列显示，元素数量超出后自动支持横向滚动，无需拖动页面整体
• 如果需要调整桌面端为4列布局，仅需修改grid-template-columns为repeat(4, 1fr)，再对应调整第10个及之后元素的列起始位置即可

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