如何解决CSS Grid布局中相邻组件高度互相影响的问题

问题根源 #

你当前遇到的高度同步问题是Grid布局的默认行高规则导致的：item1和item2都被排布在第一行，Grid中同一行的高度默认由该行内最高的元素决定，因此两者的高度会自动对齐。你觉得.item2样式没生效，是因为你设置的grid-row: 1 / span 1 是Grid元素的默认行排布规则，修改自然看不到效果。

解决方案 #

只需要修改.item2的行跨度配置，让它占满左侧所有行，右侧列就会成为独立整块，高度完全由自身内容决定，不会和左侧第一行绑定，同时左侧元素高度变化也不会影响右侧。

修改后的完整CSS代码 #

.wrapper {
    display: grid;
    grid-gap: 10px;
    /* 用1fr替代固定百分比，避免gap导致宽度溢出 */
    grid-template-columns: 1fr 1fr 1fr;
    /* 左侧元素顶部对齐，避免右侧过高时左侧出现空隙 */
    align-content: start;
    background-color: #fff;
    color: #444;
    width: 80%;
    margin: 0 auto;
  }

  .box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;
  }

  .item1 {
    grid-column: 1 / span 2;
  }
  .item2 {
    grid-column: 3;
    /* 1/-1代表从第一行跨到最后一行，占满所有左侧行 */
    grid-row: 1 / -1;
  }
  .item3 {
    grid-column: 1 / span 2 ;
    grid-row: 2 ;
  }
  .item4 {
    grid-column: 1 / span 2 ;
    grid-row: 3 ;
  }
  .item5 {
    grid-column: 1 / span 2 ;
    grid-row: 4 ;
  }

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