Grid-auto-rows with auto - 如何控制最后一行的高度？

Question

我需要创建一个行数未知的网格容器 - 以便除了最后一行之外的所有行都占据内容的高度，并且最后一行（无论内容的高度如何）占据网格容器的剩余高度.

这是我的 HTML 变体：

 <div className="grid-container">
      <div className="item">some data 1 </div>
      <div className="item">some data 2</div>
      <div className="item">some data 3</div>
      <div className="item">some data 4</div>
      <div className="last-item">last one</div>
    </div>

我一直在努力做：

.grid-container {
  display: grid;
  grid-template-rows: repeat(auto-fill, min-content) 1fr;
  height: 500px; /* It doesn't really matter, it's just for clarity's sake. */
}
.item {
 height: max-content;
}

 grid-template-rows: repeat(auto-fill, min-content) 1fr;

- 它不是有效的代码（只是我尝试解决问题），但我不知道如何解决这个问题，请帮助并提前致谢

Answer 1

在尝试了 CSS 网格的所有可能组合之后，我得出的结论是 CSS 网格无法实现这一点。

我们只能通过 Flexbox 来实现这一点，这就是为什么我们说网格与 Flexbox 完美同步。

.grid-container {
      display: flex; 
      flex-direction: column; 
      height: 100vh;
    }

    .grid-item {
      flex: 0 1 auto; 
    }

    .last-item {
      flex: 1 1 auto; 
      background: orange;
    }

    <div class="grid-container">
      <div class="grid-item">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis illo quibusdam voluptas
        veritatis? Qui unde totam quas dicta, omnis officiis.
      </div>
      <div class="grid-item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, impedit.
      </div>
      <div class="grid-item">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis, dolore.
      </div>
      <div class="grid-item">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, ipsa.
      </div>
      <div class="last-item">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ipsam inventore labore
        mollitia nesciunt rerum maxime rem officia quam ex?
      </div>
      </div>