如何实现空间自适应的CSS Grid布局？现有布局问题求助

当前你的Grid布局存在两个问题：一是列宽固定无法自适应容器，二是每行高度被最高元素统一拉伸造成空间浪费。要实现每个产品项高度独立、保持123/456的行列排列顺序，同时支持动态无限数据，只需调整CSS样式即可：

修改后的CSS样式 #

.productSection {
    display: grid;
    grid-gap: 1rem;
    /* 固定每行3列，列宽自适应容器，最小宽度200px避免过窄 */
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    justify-content: center;
    animation: append-animate .5s linear;
    margin-bottom: 1rem;
    /* 让每行高度由单元格自身内容决定，不强制统一行高 */
    grid-auto-rows: min-content;
}

.productLink{
    text-decoration: none;
    color: black;
}

.productBox {
    border: 1.5px solid gray;
    padding: 10px;
    overflow: clip;
    border-radius: 12px;
    /* 可选：添加hover效果提升交互体验 */
    transition: box-shadow 0.2s ease;
}

.productBox:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.productBox p {
    margin: 0;
    padding: 1px;
    font-size: 0.8rem;
}

.productBox h4 {
    margin: 0;
    padding: 2px;
    font-weight: 600;
}

关键修改说明 #

• grid-template-columns: repeat(3, minmax(200px, 1fr))：固定每行3列，minmax(200px, 1fr)保证列宽在容器空间充足时平分宽度，空间不足时最小保持200px，避免布局错乱。
• grid-auto-rows: min-content：取消默认的统一行高逻辑，让每个单元格高度仅适配自身内容，彻底解决空间浪费问题。

React代码无需修改，保持原有数据渲染逻辑即可，动态加载的产品项会自动按123、456的顺序排列，且每个项高度独立自适应。

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