如何让Grid单元格适配内容？自定义高度致布局错乱求助

问题描述 #

我尝试调整Grid单元格以适配内容，但单独设置高度后整体布局出现错乱。现有布局中，bigcontainer为Grid容器，内部包含mycontainer（Grid容器）和seconContainer（Flex容器）。

现有代码 #

CSS代码 #

mycontainer {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 10px;
  padding: 10px;
}
.mycontainer > div {
  background-color: gray;
  border: 1px red solid;
}
.boxe1 {
  grid-column: 1 / span 2;
}

.seconContainer > div {
  background-color: gray;
  border: 1px red solid;
}
.boxe1 {
  height: 435px;
}
.boxe5 {
  height: 535px;
}
.seconContainer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}
.bigcontainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 25px;
}
@media only screen and (max-width: 800px) {
  .bigcontainer {
    background-color: blue;
    display: flex;
    flex-direction: column;
  }
}

HTML代码 #

<div class="bigcontainer">
  <div class="mycontainer">
    <div class="boxe1"> 
      <p><br/></p>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br/>
         Aliquid sit provident doloremque vitae deserunt<br/> rerum placeat
          neque tenetur, atque
         unde. Dolores consectetur,<br/> assumenda animi aliquid incidunt 
         enim nam natus sunt.</p><p><br/></p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br/>
          Aliquid sit provident doloremque vitae deserunt<br/> rerum placeat
           neque tenetur, atque
          unde. Dolores consectetur,<br/> assumenda animi aliquid incidunt 
          enim nam natus sunt.</p><p><br/></p>
   
    </div>
    <div class="boxe2">
    <img src="textimages/box3.jpg" alt="" class="img-fluid"/>
    </div>
    <div class="boxe3">
      <img src="textimages/box3.jpg" alt="" class="img-fluid"/>
    </div>
  </div>
  <div class="seconContainer">
    <div class="boxe4">
      <img src="textimages/box4.jpg" alt="" class="img-fluid" />
    </div>
    <div class="boxe5"> 
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br/>
        Aliquid sit provident doloremque vitae deserunt<br/> rerum placeat
         neque tenetur, atque
        unde. Dolores consectetur,<br/> assumenda animi aliquid incidunt 
        enim nam natus sunt.</p><p><br/></p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br/>
         Aliquid sit provident doloremque vitae deserunt<br/> rerum placeat
          neque tenetur, atque
         unde. Dolores consectetur,<br/> assumenda animi aliquid incidunt 
         enim nam natus sunt.</p><p><br/></p>
     
  </div>
</div>

当前效果 #

期望效果 #

问题原因 #

手动给.boxe1和.boxe5设置固定高度，破坏了bigcontainer（Grid容器）的自动列高匹配逻辑，导致左右两侧容器高度错位，布局混乱。

修复方案 #

修改CSS代码，移除固定高度，优化容器的自适应逻辑：

修改后的CSS代码 #

.mycontainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
}
.mycontainer > div {
  background-color: gray;
  border: 1px solid red;
}
.boxe1 {
  grid-column: 1 / span 2;
  /* 用min-height替代固定height，保证内容能撑开容器 */
  min-height: 435px;
}

.seconContainer > div {
  background-color: gray;
  border: 1px solid red;
}
.seconContainer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  /* 让Flex容器占满Grid列的高度，和左侧容器对齐 */
  height: 100%;
}
/* 让.boxe5自动填充剩余空间，匹配左侧布局高度 */
.boxe5 {
  flex-grow: 1;
}

.bigcontainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 25px;
  /* 增加列间距，优化布局美观度 */
  gap: 25px;
}
@media only screen and (max-width: 800px) {
  .bigcontainer {
    background-color: blue;
    display: flex;
    flex-direction: column;
  }
}

关键修改说明 #

1. 修复选择器错误：原CSS中mycontainer缺少类名前的点，改为.mycontainer才能正确选中容器
2. 替换固定高度：将.boxe1的height改为min-height，既能保留最小高度，又允许内容撑开容器
3. Flex容器高度适配：给seconContainer设置height: 100%，让它占满Grid列的高度，和左侧容器对齐
4. 自动填充剩余空间：给.boxe5添加flex-grow: 1，让它自动填充Flex容器的剩余空间，匹配左侧布局高度
5. 优化列间距：给bigcontainer增加gap属性，提升布局的视觉效果

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