如何让CSS Grid布局中每行元素仅占用内容所需高度？

Grid布局默认会让同一行内的所有单元格高度匹配该行最高的单元格，这就是为什么第5个元素会被第4个元素的高度带起来。

要让第5个单元格只占用自身内容所需高度，只需要给它设置align-self: start;——这个属性会让单元格在垂直方向上对齐到行的起始位置，不再被拉伸填满整行高度。

修改后的代码如下：

CSS代码 #

.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;
}

/* 让第5个单元格仅占用内容高度 */
.wrapper > div:nth-child(5) {
    align-self: start;
}

HTML代码（无需修改） #

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

如果需要让多个单元格都保持内容高度，也可以直接给.wrapper > div设置align-self: start;，这样所有单元格都只会占用自身内容所需的高度，不会被同行的其他单元格拉伸。

内容的提问来源于stack exchange，提问作者Doug Cassidy