如何实现自适应行高的水平滚动CSS Grid布局？

我现有一个垂直滚动的Grid布局，列宽可自适应容器宽度，代码如下：

.grid {
  display: grid;
  overflow-y: auto;
  grid-template-columns: repeat(auto-fit, minmax($min-column-width, 1fr));
}

现在想实现水平滚动的Grid布局，要求行高能自适应容器高度（相当于上述布局的旋转版本），但实际实现难度远超预期。

我已尝试以下代码（含多种变体）：

.grid {
  display: grid;
  overflow-x: auto;
  overflow-y: hidden;
  grid-template-rows: repeat(auto-fit, minmax($min-row-height, 1fr));
  grid-auto-flow: row;
}

请问这种布局是否可实现？

这种布局是可以实现的，核心是调整网格的排列方向和尺寸规则，以下是具体实现方案：

基础单行水平滚动Grid #

.grid {
  display: grid;
  overflow-x: auto;
  overflow-y: hidden;
  /* 让行高自适应容器高度，最小高度为设定值 */
  grid-template-rows: minmax($min-row-height, 1fr);
  /* 切换网格项排列方向为列，超出宽度时触发水平滚动 */
  grid-auto-flow: column;
  /* 定义每列的最小宽度，保证内容不会过度压缩 */
  grid-auto-columns: minmax($min-column-width, auto);
  /* 给容器设置固定高度，确保行高能自适应填充 */
  height: 400px; /* 根据需求替换为目标高度，也可继承父容器高度 */
}

多行水平滚动Grid（类似垂直布局的旋转版） #

如果需要多行结构，只需调整行模板为多行，保持列方向排列即可：

.grid {
  display: grid;
  overflow-x: auto;
  overflow-y: hidden;
  /* 设定固定行数，每行高度均分容器高度，同时保留最小高度限制 */
  grid-template-rows: repeat(3, minmax($min-row-height, 1fr));
  grid-auto-flow: column;
  grid-auto-columns: minmax($min-column-width, auto);
  height: 600px;
}

关键调整说明 #

• 将grid-auto-flow设为column是核心，让网格项沿水平方向排列，超出容器宽度时触发横向滚动。
• grid-template-rows结合容器固定高度，实现行高的自适应填充，minmax保证行高不会低于设定的最小值。
• grid-auto-columns控制每列的最小宽度，避免网格项因空间不足被过度压缩。

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