CSS Grid中的项目如何填充行高？

Question

我发现了很多关于如何设置CSS网格（使用display: grid）行以匹配网格中最高项的答案，但我要做的是调整网格内的项目大小以适应网格。

例如，这是网格中的一行示例。请注意，第一个项目与网格相切，而其他两个项目较短，并且在它们下方有空白空间（因为它们的标题较短）？如何使所有项目都适合网格本身？

网格的代码：

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

- Steve

---

如果您认为您的问题不是重复的，请提供一个 [mcve]，@steve。 - TylerH

Answer 1

你可以将 display: flex; flex-direction: column 应用于你的网格项，使用 flex: 1 让你想要填充所有可用高度的部分增长。类似的方法在这篇文章中也有应用。

- Ilya Streltsyn

Answer 2

在第二个和第三个子元素中使用“justify”属性将它们拉伸到整个div中，或为这些第二个和第三个子元素分别创建一个父div，然后使内部子元素即第二个和第三个子元素的显示方式为网格。

您可以在此处查看正确的命令。

- Amaan Kulshreshtha

---

所有三个子元素已经被拉伸到整个高度（请看白色背景区域）。问题在于使它们的内容占据整个高度，以便灰色页脚粘附在它们的底部。 - Ilya Streltsyn