CSS Grid 中的项目填充行高？ [复制]答案

【问题标题】：Items inside a CSS Grid fill the row height? [duplicate]CSS Grid 中的项目填充行高？ [复制]
【发布时间】：2017-10-25 17:49:14
【问题描述】：

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

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

网格的代码：

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

可以看到正确的命令here

【讨论】：