CSS Grid，如何让一行中的每一项只占用需要的内容高度？

Question

在网格中，我不知道如何让每个项目只有它需要的高度。在下面的示例中，我希望单元格 5 的高度与单元格 1、2、3 相同，即：只有它需要的高度。 我尝试了很多

grid-template-rows

值

.wrapper {
    border: 2px solid #f76707;
    background-color: #fff4e6;
    display: grid;
    grid-template-columns: repeat(3, minmax(33px, 1fr));
    grid-gap: 2vw;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}

<div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four<BR>more<BR>more</div>
    <div>Five</div>
</div>

Answer 1

我的一个图书馆项目也遇到了非常相似的问题。我不知道这是否是完美的解决方案，因为我不知道这将如何随着尺寸等而改变，但也许它可以帮助您找到更好的解决方案，至少它是一个开始。所以我希望它能帮助你。

<div id="hideFifth">Five</div>

已添加ID

#hideFifth {
    height: 20px;
    overflow: hidden:
}

所以我只是给你想要隐藏的元素一个id，然后设置元素的样式。最明显的问题是您需要一个更通用的名称，然后将其添加到您想要创建的任何框中。我不知道这会如何改变事情的进展。但就像我说的，也许这将是寻找更好解决方案的良好开端。总而言之，现在您的盒子大小相同，并且 1 2 和 3 。