CSS Grid - 自动列高度

Question

cart form垂直拉伸，thumbs位于左下角，当我希望它们直接位于购物车形状下方时：

＆＃13;

＆＃13;

.product-page--main-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto 1fr auto;
}

.product-page--main-content>* {
  padding: 50px 100px;
  border: 1px solid #ccc;
}

.product-page--cart-form-block {
  grid-row: 2;
}

.product-page--thumbs {
  grid-row: 3;
}

.product-page--images {
  grid-column: span 2;
  grid-row: span 3;
  height: 400px;
}

.product-page--description {
  grid-row: span 3;
}

＆＃13;

<div class="product-page--main-content">
  <div class="product-page--title-n-vendor">Title</div>
  <div class="product-page--cart-form-block">Cart form</div>
  <div class="product-page--thumbs">Thumbs</div>
  <div class="product-page--images">Images</div>
  <div class="product-page--description">Description</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Codepen：https://codepen.io/paulmason/pen/rYXyYW

Answer 1

你所拥有的代码完美无缺，正如所写。

您的图片网格项设置为height: 400px。

.product-page--images {
    grid-column: span 2;
    grid-row: span 3;
    height: 400px;
} 

然后你有50px的顶部和底部填充。

.product-page--main-content > * {
    padding: 50px 100px;
    border: 1px solid #ccc;
}

因此，图像网格项目高度为500像素，连续设置为1fr，位于三行网格中。按照规定，这一切都完美无缺。

也许你想要的是四个行：

.product-page--main-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* grid-template-rows: auto 1fr auto; */ /* now defaults to grid-auto-rows: auto */
}
.product-page--main-content > * {
  padding: 50px 100px;
  border: 1px solid #ccc;
}

.product-page--cart-form-block {
  grid-row: 2;
}

.product-page--thumbs {
  grid-row: 3;
}

.product-page--images {
  grid-column: span 2;
  grid-row: span 4;            /* changed from 3 */
  height: 400px;
}

.product-page--description {
  grid-row: span 4;            /* changed from 3 */
}

<div class="product-page--main-content">
  <div class="product-page--title-n-vendor">Title</div>
  <div class="product-page--cart-form-block">Cart form</div>
  <div class="product-page--thumbs">Thumbs</div>
  <div class="product-page--images">Images</div>
  <div class="product-page--description">Description</div>
</div>

Answer 2

我不确定这是你问的问题，但这似乎适合：改变

grid-template-rows: auto 1fr auto;

到

grid-template-rows: 3;