CSS Grid列堆叠问题：列间过大间隙如何解决？

我是CSS Grid新手，桌面端布局里第2列和第4列之间存在大间隙，需要让它们紧密排列。要求：

• 即使各列文本高度不同，所有列也要整齐对齐、无间隙
• 移动端所有列正常堆叠

问题截图：

当前代码：

CSS 代码 #

.one { background: red;} 
.two { background: pink;} 
.three { background: green;} 
.four { background: yellow;} 
.wrapper section { height: fit-content;} 

@media (max-width: 768px) { 
  .wrapper section:nth-child(2) { margin: 32px 0 40px;} 
  .wrapper section:nth-child(4) { margin: 24px 0 40px;}
} 

@media (min-width: 768px) { 
  .wrapper { display: grid; gap: 1rem 4rem; grid-template-columns: repeat(2, 1fr);} 
  .wrapper section { grid-column: 1/2;} 
  .wrapper section.sp { grid-column: 2/3; grid-row: 1 / span 3;} 
  .wrapper section.sa { grid-column: 2/2; grid-row: 3 / span 1;}
} 

@media (min-width: 1280px) { 
  .wrapper { padding: 32px 24px 24px;}
}

HTML 代码 #

<div class="wrapper"> 
  <section class="one"> 
    <p> MOBILE ORDER 1 </p> 
    <P> DESKTOP COL 1 TOP LEFT </P> 
    <p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p> 
    <p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p> 
  </section> 
  <section class="two sp"> 
    <p> MOBILE ORDER 2 </p> 
    <P> DESKTOP COL 2 TOP RIGHT </P> 
    <p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p> 
    <p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p> 
    <p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p> 
    <p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p> 
  </section> 
  <section class="three"> 
    <p> MOBILE ORDER 3 </p> 
    <P> DESKTOP COL 1 BOTTOM LEFT </P> 
    <p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p> 
    <p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p> 
    <p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p> 
    <p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p> 
  </section> 
  <section class="four sa"> 
    <p> MOBILE ORDER 4 </p> 
    <P> DESKTOP COL 2 BOTTOM RIGHT </P> 
    <p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p> 
    <p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p> 
  </section> 
</div>

解决方案 #

问题根源是给.sp元素设置了grid-row: 1 / span 3，强制它占据3行高度，导致.sa只能从第3行开始，产生多余间隙。调整Grid行分配逻辑即可修复：

修改桌面端CSS规则：

@media (min-width: 768px) { 
  .wrapper { 
    display: grid; 
    gap: 1rem 4rem; 
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: min-content;
  } 
  .wrapper .one, .wrapper .three { grid-column: 1; }
  .wrapper .two, .wrapper .four { grid-column: 2; }
}

修改后效果：

• 第二列的两个元素会紧密堆叠，无额外间隙
• 第一列元素高度不同时，Grid自动调整行高，保持列对齐
• 移动端布局不受影响，依然正常堆叠

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