如何为2列2行的Grid添加水平滚动溢出效果？

问题核心 #

你当前的代码固定了2列2行的网格结构，元素超出时会自动新增行而非列，因此无法触发横向滚动。下面提供两种适配你需求的实现方案：

方案1：按列方向填充（新增元素在右侧独立列） #

这种方式让元素优先填满每一列，满列后自动在右侧生成新列，固定保持2行结构：

.projects {
  display: grid;
  gap: 1rem;
  grid-template-rows: repeat(2, 1fr); /* 固定2行高度 */
  grid-template-columns: repeat(2, 1fr); /* 初始2列宽度 */
  grid-auto-columns: 1fr; /* 自动新增的列与初始列宽度一致 */
  grid-auto-flow: column; /* 元素按列方向填充，而非默认的行方向 */
  overflow-x: auto; /* 开启横向滚动 */
  width: 100%; /* 容器宽度限制为父元素宽度 */
}

方案2：按行方向填充（新增元素在右侧行位置） #

如果希望元素保持行优先排列（比如前4个元素占2行2列，第5个元素排在第一行第三列），可以强制网格宽度适配内容总宽度，超出容器时触发滚动：

.projects {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr); /* 初始2列宽度 */
  grid-template-rows: repeat(2, 1fr); /* 固定2行高度 */
  grid-auto-columns: 1fr; /* 自动新增的列与初始列宽度一致 */
  overflow-x: auto; /* 开启横向滚动 */
  width: 100%; /* 容器宽度限制为父元素宽度 */
  min-width: max-content; /* 强制网格宽度适配所有列的总宽度，不自动收缩 */
}

补充提示 #

• 若需要固定列宽（比如300px），可将代码中的 1fr 替换为具体数值，确保新增列与初始列尺寸统一；
• overflow-x: auto 仅在网格宽度超出容器时显示滚动条，避免无意义的滚动条占位。

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