CSS 网格 - 自动列高

Question

cart form 垂直拉伸，thumbs 定位在左下角，当我希望它们像这样直接坐在购物车表格下方时：

.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;
}

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

代码笔：https://codepen.io/paulmason/pen/rYXyYW

Answer 1

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

grid-template-rows: auto 1fr auto;

至

grid-template-rows: 3;

Answer 2

您拥有的代码如所写的那样工作完美。

您的图像网格项目设置为 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;
}

所以图像网格项目是 500px 高，一行设置为 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>

CSS 网格 - 自动列高

CSS Grid - auto column height

html

css

grid

css-grid