如何解决CSS Grid列内元素拉伸，消除侧边栏之间的垂直空白

解决方法 #

你可以通过以下方式实现需求，不需要修改现有Grid布局和DOM结构：

方案1：修改网格行高配置（改动最小，最常用）

给 .grid 选择器添加 grid-template-rows: auto auto 属性即可：

.grid {
  display: grid;
  grid-template-areas:
    '. b b b b b b . p p p .'
    '. b b b b b b . s s s .';
  /* 新增属性 */
  grid-template-rows: auto auto;
  
  /* 原有其他样式保持不变 */
  &__item {
    align-self: start;
    background-color: #999;
    
    &--body {
      grid-area: b;
      height: 20rem;
    }
    
    &--primarySidebar {
      grid-area: p;
    }
    
    &--secondarySidebar {
      grid-area: s;
    }
  }
}

问题原因：默认网格行高为 1fr，会均分跨两行的Body元素的20rem总高度，导致上下两个右侧单元格各占10rem高度，即使子元素设置了顶部对齐，单元格本身的占位也会产生空白。修改为auto后，第一行高度会自适应匹配Primary侧边栏的内容高度，剩余高度全部分配给第二行，两个侧边栏顶部对齐后自然贴合，无多余空白。

如果修改后还有拉伸问题，检查align-self: start是否正确应用到了.grid__item元素上，嵌套的预处理器代码如果层级写错会导致该属性不生效。

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