CSS 网格中的项目填充行高？

Question

我找到了许多显示如何设置 CSS 网格（使用 display: grid）行以匹配网格中最高项目的答案，但我想要做的是调整网格内的项目 以匹配网格。

例如，这是网格中的示例行。看到第一个项目如何与网格齐平，而其他 2 个项目更短并且在它们下面有白色 space（因为它们的标题更短）？我怎样才能让所有项目适合网格本身？

网格代码：

.video-grid {
 display: grid;
 grid-gap: 20px;
 grid-template-columns: repeat(3, 1fr);
}

Answer 1

您可以将 display: flex; flex-direction: column 设置为您的网格项目，并使您想要填充所有可用高度的部分随着 flex: 1 增长。使用了类似的方法 in this article。

Answer 2

在第二个和第三个 child 中使用 justify 属性将它们完全拉伸 div，或者为这些 parent div分别是第二个和第三个child，然后使内部children即第二个和第三个child显示为网格。

你可以看到正确的命令here

Items inside a CSS Grid fill the row height?