防止 CSS 网格列中的项目拉伸答案

【问题标题】：Prevent item stretch in CSS grid column防止 CSS 网格列中的项目拉伸
【发布时间】：2021-10-31 21:44:49
【问题描述】：

我有以下 HTML 和 CSS：

.grid {
  display: grid;
  grid-template-areas:
    '. b b b b b b . p p p .'
    '. b b b b b b . s s s .';
  
  &__item {
    align-self: start;
    background-color: #999;
    
    &--body {
      grid-area: b;
      height: 20rem;
    }
    
    &--primarySidebar {
      grid-area: p;
    }
    
    &--secondarySidebar {
      grid-area: s;
    }
  }
}

<div class="grid">
  <div class="grid__item grid__item--body">
    Body
  </div>
  <div class="grid__item grid__item--primarySidebar">
    Primary sidebar
  </div>
  <div class="grid__item grid__item--secondarySidebar">
    Secondary sidebar
  </div>
</div>

输出如下：

在这里编写代码：https://codepen.io/CaribouCode/pen/RwgRPvb

看起来primarySidebar 已被拉伸以填充总高度的 50%。如何防止它这样做，从而删除primarySidebar 和secondarySidebar 之间的空格？

注意：出于其他原因，我必须使用网格和这种 DOM 结构，所以我在这里寻找的是一些我可以添加的 CSS 属性以避免不需要的垂直空间。

【问题讨论】：

标签： html css sass css-grid

【解决方案1】：

一个选项是将流更改为column，并将前两行指定为auto，然后告诉主要区域跨越3行......就像这样。

.grid {
  display: grid;
  width:100%;
  gap: 0.5em;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-auto-flow: column;
}

.grid__item {
  background-color: #999;
}

.grid__item--body {
  grid-column: span 8;
  grid-row: span 3;
  height: 20rem;
}

.grid__item--primarySidebar {
  grid-column: span 4;
}

.grid__item--secondarySidebar {
  grid-column: span 4;
}

<div class="grid">
  <div class="grid__item grid__item--body">
    Body
  </div>
  <div class="grid__item grid__item--primarySidebar">
    Primary sidebar Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi sint recusandae non ipsum vitae in vel labore quia corporis magni.
  </div>
  <div class="grid__item grid__item--secondarySidebar">
    Secondary sidebar Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi sint recusandae non ipsum vitae in vel labore quia corporis magni
  </div>
</div>

【讨论】：

这看起来像是将设计从特定的 12 列布局（我稍后添加媒体查询时需要）更改为等宽的 2 列布局。
@CaribouCode 回答更新但原理是一样的。

【解决方案2】：

我认为这不是网格问题 - 您在正文中添加了 20rem 高度，但没有在侧边栏中添加 - 您可以尝试每个添加 10rem，或 100%

【讨论】：

这不是一个建议论坛。请提供您知道工作的答案。

【解决方案3】：

.grid {
  display: grid;
  gap: 2px;
  /* define the number of grid columns */
  grid-template-columns: repeat( 12, minmax(250px, 1fr) );
  grid-template-rows: auto auto 1fr;
  grid-auto-flow: column;
}

.grid__item {
  background-color: #999;
}

.grid__item--body {
  grid-column: 1;
  grid-row: span 3;
  height: 20rem;
}

.grid__item--primarySidebar {
  grid-column: 2;
  white-space: break-spaces;
}

.grid__item--secondarySidebar {
  grid-column: 2;
  white-space: break-spaces;
}

<div class="grid">
  <div class="grid__item grid__item--body">
    Body
  </div>
  <div class="grid__item grid__item--primarySidebar">
    Primary sidebar
  </div>
  <div class="grid__item grid__item--secondarySidebar">
    Secondary sidebar
  </div>
</div>

【讨论】：

这似乎删除了我在扩展此设计时需要的 12 列网格布局
请查看调整后的 CSS。此链接：“css-tricks.com/…”将有助于在扩展您的设计时进行调整。