最后一个隐式行如何具有不同的高度？

Question

正在处理 CSS 包含多个照片卡（项目）的网格示例。假设这些项目是由任何服务器端逻辑动态创建的。

网格容器中的最后一项是 div 元素，定义为该网格的页脚，其中还包含一个必须在其父项内居中对齐的按钮。

根据网格定义，页脚采用隐含行的高度：200px。页脚元素跨越网格的 2 列。

位于最后一个隐式行中的页脚如何具有比在网格容器上定义的 grid-auto-rows 属性更小的尺寸？

.travel-photos {
  margin: 0 auto;
  width: 80%;
  background: lightblue;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px;
  grid-auto-rows: 200px;
  grid-gap: 20px 10px;
}

.travel-photos h1 {
  text-align: center;
  grid-column: 1 / 3;
}

.photo-card>img {
  width: 100%;
  height: 100%;
  background-color: cyan;
}

.photos-footer {
  background-color: lightgreen;
  grid-column: 1 / 3;
}

<section class="travel-photos">
  <h1>PHOTOS</h1>

  <div class="photo-card">
    <img src="http://lorempixel.com/200/200/">
  </div>

  <div class="photo-card">
    <img src="http://lorempixel.com/200/200/">
  </div>

  <div class="photo-card">
    <img src="http://lorempixel.com/200/200/">
  </div>

  <div class="photo-card">
    <img src="http://lorempixel.com/200/200/">
  </div>

  <div class="photo-card">
    <img src="http://lorempixel.com/200/200/">
  </div>

  <div class="photo-card">
    <img src="http://lorempixel.com/200/200/">
  </div>
  <div class="photo-card">
    <img src="http://lorempixel.com/200/200/">
  </div>


  <div class="photos-footer">
    <button>MORE</button>
  </div>

</section>

Answer 1

也许在这里使用 grid-auto-rows: min-content; 没问题。 grid-template-rows:50px; 只会设置第一行的高度。

如有必要，

height 或 max-height 可用于 .photo-card。

.travel-photos {
  margin: 0 auto;
  width: 80%;
  background: lightblue;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px;
  grid-auto-rows: min-content;
  grid-gap: 20px 10px;
}

.travel-photos h1 {
  text-align: center;
  grid-column: 1 / 3;
}

.photo-card>img {
  width: 100%;
  height: 100%;
  background-color: cyan;
}

.photos-footer {
  background-color: lightgreen;
  grid-column: 1 / 3;
}

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">


</head>

<body>

  <section class="travel-photos">
    <h1>PHOTOS</h1>

    <div class="photo-card">
      <img src="http://lorempixel.com/200/200/">
    </div>

    <div class="photo-card">
      <img src="http://lorempixel.com/200/200/">
    </div>

    <div class="photo-card">
      <img src="http://lorempixel.com/200/200/">
    </div>

    <div class="photo-card">
      <img src="http://lorempixel.com/200/200/">
    </div>

    <div class="photo-card">
      <img src="http://lorempixel.com/200/200/">
    </div>

    <div class="photo-card">
      <img src="http://lorempixel.com/200/200/">
    </div>
    <div class="photo-card">
      <img src="http://lorempixel.com/200/200/">
    </div>


    <div class="photos-footer">
      <button>MORE</button>
    </div>

  </section>





</body>

</html>

Answer 2

grid-auto-rows 属性只接受轨道大小作为值。它不接受允许您定位特定行的任何形式的语法。

因此，需要另一种方法来调整出现在最后一个隐式行中的网格项的大小。

这是一个简单的解决方案：直接定位最后一项。

.photos-footer {
    height: 50px;
}

然后，因为您希望该项目（按钮）的内容居中，所以使用 flexbox：

.photos-footer {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

完整代码如下：

.travel-photos {
  margin: 0 auto;
  width: 80%;
  background: lightblue;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px;
  grid-auto-rows: 200px;
  grid-gap: 20px 10px;
}

.travel-photos h1 {
  text-align: center;
  grid-column: 1 / 3;
}

.photo-card > img {
  width: 100%;
  height: 100%;
  background-color: cyan;
}

.photos-footer {
    height: 50px;
    align-self: end;  /* align item to bottom of row */
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 1 / 3;
    background-color: lightgreen;
}

<section class="travel-photos">
  <h1>PHOTOS</h1>
  <div class="photo-card">
    <img src="http://lorempixel.com/200/200/">
  </div>
  <div class="photo-card">
    <img src="http://lorempixel.com/200/200/">
  </div>
  <div class="photo-card">
    <img src="http://lorempixel.com/200/200/">
  </div>
  <div class="photo-card">
    <img src="http://lorempixel.com/200/200/">
  </div>
  <div class="photo-card">
    <img src="http://lorempixel.com/200/200/">
  </div>
  <div class="photo-card">
    <img src="http://lorempixel.com/200/200/">
  </div>
  <div class="photo-card">
    <img src="http://lorempixel.com/200/200/">
  </div>
  <div class="photos-footer">
    <button>MORE</button>
  </div>
</section>

注意根据 grid-auto-rows规则。此解决方案仅更改最后一行内网格项的高度。这就是倒数第二行和固定到最后一行底部的网格项之间存在间隙的原因。

如果最后一行本身必须具有不同的高度，那么我建议将其从网格容器中移除并将其作为新元素放置在下方。

NOTE 还有问题中提出的问题只适用于implicit grid .在 explicit 网格中，定义最后一行（或任何一行）的高度简单易行。

最后一个隐式行如何具有不同的高度？

How can a last implicit row have a different height?

html

css

css-grid