如何实现CSS Grid行高自适应及自定义列项排列？

我在搭建CSS Grid布局时遇到两个核心问题：

• 行高设置auto不生效，网格项始终保持1fr的最小高度，即便内容很少也不会收缩，导致行与列之间出现大量空白；
• 需要实现三个父容器A、B、C，每个容器内部为网格结构，服务器返回的子项（如A1、B1）需放入对应父容器的列中；当父容器内子项超过3个时自动新增列，且4个子项时要第一列放3个、第二列放1个，而非均分排列。

现有代码 #

.container {
  display: grid;
  grid-template-columns: 1fr;
  background: #faf;
  border-radius: 5px;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  width: fit-content;
}

.item {
  color: #fff;
  padding: 15px;
  margin: 5px;
  background: #3db5da;
  border-radius: 3px;
  width: 90px;
  height: fit-content;
}

<div class="container">
  <div class="item">
    Item 1
    <p>Hi, I'm a test</p>
  </div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

当前效果 #

每个行的高度被强制拉平，内容较少的网格项下方存在大量空白；6个item分成两列，每列3个，但所有行高一致，造成空间浪费。

期望效果 #

每个网格项高度随内容自适应，行与行之间无多余空白；列数根据子项数量自动扩展（3个以内1列，4-6个2列，以此类推）；4个item时第一列放3个、第二列放1个，而非均分排列。

解决方案 #

问题根源在于grid-template-rows: 1fr 1fr 1fr将行高固定为均分可用空间，导致无法收缩。同时需要调整网格流的填充规则来满足列排列需求。

修改后的CSS代码：

.container {
  display: grid;
  grid-template-columns: 1fr;
  background: #faf;
  border-radius: 5px;
  grid-template-rows: repeat(3, auto); /* 每列固定3行，行高自适应内容 */
  grid-auto-columns: 1fr;
  grid-auto-flow: column dense; /* 优先填充列的空白，确保第一列先填满3个 */
  width: fit-content;
}

.item {
  color: #fff;
  padding: 15px;
  margin: 5px;
  background: #3db5da;
  border-radius: 3px;
  width: 90px;
}

关键调整说明：

1. grid-template-rows: repeat(3, auto)：定义每列包含3个自适应行高的行，既保证每列最多放3个item，又让行高随内容自动调整，消除空白；
2. grid-auto-flow: column dense：设置网格按列方向排列，dense参数会让后续item填充前面的空白位置，确保第一列优先填满3个后再开启新列，满足4个item时的排列需求；
3. 移除height: fit-content：网格项默认高度就是自适应内容，无需额外设置。

测试验证：

• 3个item：1列3行，行高完全匹配内容，无空白；
• 4个item：第一列3个，第二列1个，所有行高自适应；
• 6个item：两列各3个，行高随每个item的内容变化。

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