最后一个隐式行如何具有不同的高度? [英] How can a last implicit row have a different height?

问题描述

研究包含多个照片卡(项目)的CSS Grid示例.假设这些项目是由任何服务器端逻辑动态创建的.

Working on a CSS Grid example that contains several photo cards (items). Let's imagine that these items are created dynamically by any server-side logic.

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

The last item in the grid container is a div element defined as a footer for that grid, which also contains a button that has to be center-aligned inside its parent.

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

By the grid definition, the footer takes the height of the implicit row: 200px. The footer element spans the 2 columns of the grid.

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

How can the footer, being in the last implicit row, have a smaller size than the grid-auto-rows property, defined on the grid container?

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

推荐答案

The grid-auto-rows property only accepts track sizes as values. It does not accept any form of syntax that would allow you to target a particular row.

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

Therefore, another method is needed to size the grid item appearing in the last implicit row.

这是一个简单的解决方案:直接定位最后一个项目.

Here's a simple solution: Target the last item directly.

.photos-footer {
    height: 50px;
}

然后，由于您希望该项目(按钮)的内容居中，因此请使用flexbox:

And then, because you want the content of that item (the button) centered, use 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 that this solution doesn't actually change the height of the last grid row, which remains at 200px, per the grid-auto-rows rule. This solution changes only the height of the grid item inside the last row. That's why there's a gap between the penultimate row and the grid item pinned to the bottom of the last row.

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

If the last row itself must have a different height, then I would suggest removing it from the grid container and placing it underneath as a new element.

注意 ，该问题中提出的问题仅适用于隐式网格.在 explicit 网格中，定义最后一行(或任何一行)的高度非常容易.

NOTE also that the problem raised in the question applies only in the implicit grid. In the explicit grid, defining the height of the last row (or any row, for that matter) is simple and easy.

这篇关于最后一个隐式行如何具有不同的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！