求助：如何实现图片所示的CSS网格布局？

根据你提供的图片，目标布局为：第一行显示3个列表项，第二行显示2个列表项且整体居中对齐。以下是针对你的问题的修正方案：

原代码存在的问题 #

• 重复定义了:nth-child(4)的样式规则，后声明的规则覆盖了先声明的，导致第4个列表项的网格位置设置无效
• 未对第5个列表项设置网格位置，无法实现第二行的居中效果
• grid-template-columns: repeat(3, 1fr)会让列占满容器宽度，配合justify-content: center无法直接实现第二行元素的居中

修正后的CSS代码（SCSS语法） #

.list {
    display: grid;
    grid-template-columns: repeat(3, auto); /* 列宽自适应内容，方便整体居中 */
    justify-content: center; /* 让整个网格内容在容器中居中 */
    row-gap: 50px;
    column-gap: 30px;
    padding: 0; /* 清除ul默认内边距 */

    > li {
        list-style: none;
        width: 100px; /* 示例宽度，可根据需求调整 */
        height: 100px; /* 示例高度，可根据需求调整 */
        background-color: #ccc; /* 示例背景色，方便查看效果 */
    }

    > li:nth-child(4) {
        grid-column: 2; /* 第4个li放在第2列 */
    }

    > li:nth-child(5) {
        grid-column: 3; /* 第5个li放在第3列 */
    }
}

代码说明 #

1. 将grid-template-columns改为repeat(3, auto)，让列宽根据列表项内容自适应，配合justify-content: center可以让整个网格在容器中居中
2. 清除ul默认的内边距padding: 0，避免布局偏移
3. 为列表项添加了示例宽高和背景色，方便直观查看布局效果，可根据实际需求修改
4. 通过grid-column明确指定第4、5个列表项的列位置，实现第二行两个元素居中的效果

如果你需要让列宽保持一致且占满容器宽度，可以调整如下：

.list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 等宽列占满容器 */
    row-gap: 50px;
    column-gap: 30px;
    padding: 0;

    > li {
        list-style: none;
        height: 100px;
        background-color: #ccc;
    }

    > li:nth-child(4) {
        grid-column: 2 / span 1; /* 第4个li占据第2列 */
    }

    > li:nth-child(5) {
        grid-column: 3 / span 1; /* 第5个li占据第3列 */
    }
}

这种情况下，第二行的两个元素会位于网格的右侧区域，如果你需要严格居中，可以将网格列设置为5列，让中间3列对应原布局，不过第一种自适应列宽的方式更符合图片展示的居中效果。

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