如何修复CSS Grid布局中网格单元格的尺寸异常问题？

你的Grid布局未实现响应式换行，核心问题有两个：

1. minmax()参数缺少单位：minmax(589.19, 1fr)中的589.19未指定长度单位（如px），浏览器无法识别该值，默认使用单列布局，导致卡片横向撑满页面。
2. 卡片内部元素固定宽度限制：.section设置了固定width:330px，.image-container img也固定了宽度，导致卡片无法自适应Grid单元格的宽度变化。

修改步骤 #

1. 修复Grid列定义 #

给minmax()参数补充单位，并调整卡片间距：

main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(590px, 1fr)); /* 补充px单位 */
    gap: 20px; /* 增加卡片间距，贴近原网站效果 */
    overflow-x: hidden;
}

2. 让卡片自适应单元格宽度 #

修改.character-card及内部元素，移除固定宽度限制，实现自适应：

.character-card{
    display: flex;
    margin: 13.5px;
    background-color: rgb(60,62,68);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(37, 37, 37, 0.5);
    width: 100%; /* 让卡片填充Grid单元格 */
}

.image-container img{
    width: 229.2px;
    height: auto; /* 替换固定height，保持图片比例 */
    aspect-ratio: 1/1; /* 强制图片为正方形，和原网站一致 */
    border-radius: 10px 0px 0px 10px;     
}

.section{
    display: flex;
    flex-direction: column;
    flex: 1; /* 让信息区域填充剩余空间 */
    min-height: 64.33px; /* 用min-height替代固定height */
    color: rgb(245,245,245);
}

3. 优化小屏幕适配（可选） #

添加媒体查询，在小屏幕下将卡片改为垂直排列，提升移动端体验：

@media (max-width: 600px) {
    .character-card {
        flex-direction: column;
    }
    .image-container img {
        border-radius: 10px 10px 0 0;
        width: 100%;
    }
}

修改完成后，当浏览器窗口宽度小于590px * 列数时，Grid会自动减少每行卡片数量，直至小屏幕下显示单列，实现完全响应式效果。

内容的提问来源于stack exchange，提问作者alessi.gg