CSS Grid布局行内元素同步拉伸，如何仅让单个div自适应高度

核心原因 #

CSS Grid 同一行的行高默认由行内高度最高的元素决定，且所有网格项默认align-items: stretch，会自动拉伸填满整行高度，因此会出现单个元素内容增多、整行同步拉伸的现象。

可行修改方案 #

你可以通过修改CSS属性实现需求，以下是可直接复用的修改代码：

修改后的CSS代码 #

.grid_body {
   display: grid;
   grid-template-columns: repeat(3,1fr);
   grid-column-gap: 17.5px;
   grid-auto-rows: auto;
   grid-row-gap: 35px;
   position: absolute;
   top: 100px;
   left: 17.5px;
}

.grid_item {
   width: 300px;
   background-color: white;
   border: 5px solid rgb( 5, 214, 73, 1 );
   /* 新增属性：固定高度、溢出处理、不跟随行高拉伸 */
   height: 400px;
   overflow-y: auto; /* 不需要滚动可改为overflow-y: hidden直接隐藏超出内容 */
   align-self: start;
}

/* 新增类：给需要自适应高度的网格项单独使用 */
.grid_item--auto {
   height: auto;
}

/* 原有其余属性保持不变 */
.grid_item img {
   margin: 10px;
}

.grid_item a {
   text-decoration: none;
   color: black;
}

.grid_item a:hover {
   text-decoration: underline;
}

.grid_item p {
   text-align: justify;
   margin: 10px;
}

HTML使用方式 #

哪个网格项需要随内容自适应高度，就给它加上grid_item--auto类即可，示例：

<!-- 自适应高度的项 -->
<div class="grid_item grid_item--auto">
  <!-- 内容省略 -->
</div>
<!-- 其余固定高度的项保持原有写法即可 -->
<div class="grid_item">
  <!-- 内容省略 -->
</div>

实现逻辑 #

• align-self: start：指定网格项在网格行内顶部对齐，不会默认拉伸填满整行高度
• 普通.grid_item固定400px高度，不会随行高变化
• 加了grid_item--auto类的项会随内容自动计算高度，同时把整行撑高，其余固定高度的项不受影响

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