如何在CSS Grid中单独调整盒子高度且不影响同行其他盒子？

我正在设计一个响应式布局，选用CSS Grid实现，但遇到一个问题：希望每个盒子根据内容动态调整高度，且不影响同行其他盒子的高度。目前只要一个盒子内容增多变高，同行所有盒子都会被拉到相同高度，想知道有没有办法在保留响应式的前提下解决这个问题？如果CSS Grid不行，有没有更好的替代方案？

现有代码示例 #

CSS 代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: blueviolet;
  padding: 5%;
}

.parent-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 2rem;
}

.box {
  background-color: aqua;
  min-height: 300px;
}

HTML 代码 #

<div class="parent-container">
  <div class="box">**Lorem ipsum 200**
  </div>
  <div class="box">Item 2</div>
  <div class="box">Item 3</div>
  <div class="box">Item 4</div>
  <div class="box">Item 5</div>
  <div class="box">Item 6</div>
  <div class="box">Item 7</div>
  <div class="box">Item 8</div>
  <div class="box">Item 9</div>
  <div class="box">Item 10</div>
  <div class="box">Item 11</div>
  <div class="box">Item 12</div>
  <div class="box">Item 13</div>
  <div class="box">Item 14</div>
  <div class="box">Item 15</div>
  <div class="box">Item 16</div>
  <div class="box">Item 17</div>
  <div class="box">Item 18</div>
  <div class="box">Item 19</div>
  <div class="box">Item 20</div>
</div>

解决办法 #

用CSS Grid实现 #

CSS Grid默认会拉伸同一行的所有单元格到相同高度，要避免这个问题，只需要给每个.box添加align-self: start属性：

.box {
  background-color: aqua;
  min-height: 300px;
  align-self: start; /* 取消强制拉伸，让盒子高度由内容决定 */
}

这个改动最小，不需要调整HTML结构，就能让每个盒子的高度自适应内容，同时保留Grid的响应式布局能力。

替代方案：Flexbox #

如果更倾向于让每个元素高度完全独立，Flexbox是更适配的方案。通过flex-wrap: wrap实现响应式换行，配合flex: 1 1 300px控制元素的最小宽度和伸缩性，再设置align-items: flex-start避免高度拉伸：

.parent-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start; /* 全局设置所有项顶部对齐，高度自定 */
}

.box {
  background-color: aqua;
  min-height: 300px;
  flex: 1 1 300px; /* 最小宽度300px，空间足够时自动拉伸 */
}

这个方案同样能实现响应式布局，且每个盒子的高度完全由自身内容决定，不会被同行元素影响。

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