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

Question

我有以下 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>

输出如下所示：

Codepen 在这里：https://codepen.io/CaribouCode/pen/RwgRPvb

看起来 primarySidebar 已经拉伸到占总高度的 50%。我如何防止它这样做，从而删除 primarySidebar 和 secondarySidebar 之间的 space?

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

Answer 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>

Answer 2

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

Answer 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>

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

Prevent item stretch in CSS grid column

html

css

sass

css-grid