SPA改造后按钮纵向堆叠，如何实现3行4列横向布局？

问题背景 #

从MPA迁移到SPA后，按钮布局变为上下堆叠状态，无法实现预期的3行4列横向排列，新增按钮也只会从底部追加。

问题原因 #

你已为.button-container配置Grid布局，但存在以下问题导致布局失效：

• 固定按钮宽度与网格列宽冲突：按钮设置了width: 300px，而网格列使用1fr，若容器宽度不足以容纳4个带间距的按钮，Grid会自动换行堆叠。
• 未限制网格行数与溢出处理：grid-template-rows: repeat(3, 1fr)仅定义了3行结构，但未处理超出内容，新增按钮会直接在下方无限制堆叠。
• 容器缺少宽度约束：.button-container无明确宽度限制，无法稳定支撑4列布局。

修复代码 #

修改CSS如下，确保网格布局正常工作：

.btn-choicebutton {
  background: no-repeat center top;
  background-size: cover;
  /* 改用响应式宽度，避免固定值导致列溢出 */
  width: 90%;
  max-width: 300px;
  height: 350px;
  border: none;
  position: relative;
  border-radius: 40px;
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.button-container {
  display: grid;
  /* 4列，每列最小250px，最大自适应容器宽度 */
  grid-template-columns: repeat(4, minmax(250px, 1fr));
  /* 固定3行高度，与按钮高度匹配 */
  grid-template-rows: repeat(3, 350px);
  grid-gap: 20px;
  margin: 100px 40px 0;
  /* 限制容器总高度，超出3行显示滚动条 */
  max-height: calc(3 * 350px + 2 * 20px);
  overflow-y: auto;
  /* 让网格在容器内居中对齐 */
  justify-content: center;
}

功能说明 #

• 按钮宽度改为响应式，既保留最大显示尺寸，又能适配不同屏幕宽度避免列溢出。
• 网格固定为4列3行结构，超出3行的按钮会在容器内垂直滚动，不再无限制堆叠。
• 容器添加左右边距，避免按钮贴边，提升整体视觉效果。

内容的提问来源于stack exchange，提问作者Sangyoon Adam Han