Question

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

例如，这是网格中的一个示例行。看看第一个项目如何与网格齐平，而其他两个项目更短并且在它们下面有空白区域（因为它们的标题更短）？如何让所有项目适合网格本身？

网格代码：

.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

在第二个和第三个孩子中使用justify属性在完整的div中拉伸它们，或者分别为这些第二个和第三个孩子制作一个父div，然后使内部孩子，即第二个和第三个孩子显示为网格。

您可以看到正确的命令here