CSS实现卡片列表容器居中且换行后卡片保持左对齐

要实现.thumbs_container在.thumbs_wrapper中居中，同时保证多行卡片对齐（避免第二行卡片居中偏移），可以用以下两种方案：

方案一：Flex布局调整 #

通过固定容器宽度+左对齐的方式，确保每行卡片对齐：

.thumbs_wrapper {
    width: 50%;
    background-color: #F6F6F6;
    padding: 56px 50px;
    border-radius: 25px;
    /* 让内部容器水平居中 */
    display: flex;
    justify-content: center;
}

.thumbs_container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 25px;
    /* 计算固定宽度：3个卡片宽度 + 2个横向间距 */
    width: calc(100px * 3 + 25px * 2);
    /* 内部卡片左对齐，保证每行对齐 */
    justify-content: flex-start;
}

.thumb {
    position: relative;
    background-color: red;
    height: 100px;
    width: 100px;
    border-radius: 10px;
    overflow: hidden;
}

核心逻辑：

• 给.thumbs_wrapper添加Flex属性，直接让内部容器水平居中
• 给.thumbs_container设置刚好容纳3个卡片的固定宽度，避免容器自适应导致的对齐问题
• 用justify-content: flex-start让每行卡片左对齐，和第一行保持一致

方案二：Grid布局（更简洁） #

Grid布局天生适配网格对齐场景，无需手动计算宽度：

.thumbs_wrapper {
    width: 50%;
    background-color: #F6F6F6;
    padding: 56px 50px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
}

.thumbs_container {
    display: grid;
    /* 指定每行3列，每列宽度100px */
    grid-template-columns: repeat(3, 100px);
    gap: 30px 25px;
}

.thumb {
    position: relative;
    background-color: red;
    height: 100px;
    width: 100px;
    border-radius: 10px;
    overflow: hidden;
}

核心逻辑：

• grid-template-columns: repeat(3, 100px)直接定义每行3列的固定宽度
• 行列间距通过gap统一设置，自动保证每行卡片对齐
• 同样通过.thumbs_wrapper的Flex属性让整个卡片容器居中

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