CSS Grid布局：Div高度自适应及蓝色Div上方多余空间移除方案咨询

问题说明 #

• 采用CSS Grid布局，希望Div高度根据内容自适应
• 蓝色Div（.t）上方存在多余空间无法移除
• 可更换布局方案，需要修改方法或替代建议

原代码 #

CSS代码 #

.main {
    width: 100vw;
    max-height: A4 ;
    display: grid;
    grid-template-columns: auto auto;
}

.f {
    height: 100px;
    background-color: red;
    width: 100%;
    /* float: left ; */
}

.s {
    height: 200px;
    background-color: forestgreen;
    width: 100% ;
    /* float: right ; */
}

.t {
    height: 300px;
    background-color: blue;
    width: 100% ;
                /* float: left ; */

}

.fo {
    height: 400px;
    background-color: gray;
    width: 100% ;
                                /* float: right  ; */

}

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>

<body>

    <div class="main">
        <div class="f">dfdf</div>
        <div class="s">er</div>
        <div class="t">er</div>
        <div class="fo">er</div>

    </div>
</body>

</html>

问题原因 #

1. 多余空间问题：Grid布局默认每行高度等于该行最高元素的高度。红色Div（.f）高度100px，绿色Div（.s）高度200px，第一行被拉到200px高度，蓝色Div作为第二行第一个元素，上方自然出现100px空白。
2. 高度无法自适应：所有子元素设置了固定height，强制固定高度后无法根据内容自动调整。

解决方案 #

方案一：修改现有CSS Grid布局 #

调整Grid行高规则，同时去掉固定高度，实现自适应：

.main {
    width: 100vw;
    /* 移除无效的max-height: A4，A4不是合法CSS长度值 */
    display: grid;
    grid-template-columns: auto auto;
    /* 显式声明每行高度自适应内容（默认值为auto，可省略） */
    grid-auto-rows: auto;
}

.f {
    /* 用min-height替代固定height，既保证最小高度又支持内容自适应 */
    min-height: 100px;
    background-color: red;
    width: 100%;
}

.s {
    min-height: 200px;
    background-color: forestgreen;
    width: 100%;
}

.t {
    min-height: 300px;
    background-color: blue;
    width: 100%;
}

.fo {
    min-height: 400px;
    background-color: gray;
    width: 100%;
}

如果希望蓝色Div紧跟红色Div下方（按列填充），添加自动流方向设置：

.main {
    /* ...其他属性不变 */
    grid-auto-flow: column;
}

方案二：替代布局方案（Flexbox） #

用Flexbox实现自适应布局，同样解决多余空间问题：

.main {
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
}

.f, .s, .t, .fo {
    width: 50%; /* 两列布局，每列占50%宽度 */
    /* 用min-height保证最小高度，支持内容自适应 */
}

.f { min-height: 100px; background-color: red; }
.s { min-height: 200px; background-color: forestgreen; }
.t { min-height: 300px; background-color: blue; }
.fo { min-height: 400px; background-color: gray; }

若需要按列排列（红色→蓝色→绿色→灰色），调整Flex方向：

.main {
    height: 100vh; /* 容器需设置高度才能按列换行 */
    flex-direction: column;
    flex-wrap: wrap;
}

.f, .s, .t, .fo {
    width: 50%;
}

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