垂直空间不足时如何将1x4 grid布局切换为2x2布局？

响应式布局调整方案 #

你可以直接基于grid的自适应特性实现需求，不需要切换为flex布局，调整后的CSS代码如下：

/* 选项父容器核心样式 */
.multiple-choice {
  display: grid;
  /* 可自行调整minmax的第一个参数，控制选项最小展示宽度 */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px 15px; /* 分别控制行间距、列间距 */
  width: 100%;
}

/* 所有选项通用样式，无需单独为answer-1到answer-4写重复规则 */
.answer-item {
  display: grid;
  grid-template-columns: 45px 1fr; /* 固定复选框宽度，避免百分比布局变形 */
  align-items: center;
  min-height: 55px;
}

.checkbox {
  width: 45px;
  height: 45px;
  background-image: url('checkbox_unchecked.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.button-container {
  height: 100%;
  padding-left: 5%;
  box-sizing: border-box;
}

.button-container button {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.button {
  width: 100%;
  text-decoration: none;
  background: #000;
  color: #f5f5f5;
  border-bottom: solid 4px #f5f5f5;
  border-radius: 3px;
  font-family: hack;
  font-size: clamp(1rem, 3vw, 2rem);
  /* 改用固定值padding，避免百分比随容器尺寸变化 */
  padding: 8px 16px;
  box-sizing: border-box;
}

.btn:active {
  -ms-transform: translateY(4px);
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  border-color: #000;
}

核心调整说明 #

• 父容器使用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))实现自动列数切换：当容器宽度足够放下4个最小宽度为280px的选项时，保持1x4布局；宽度不足时自动减少列数，垂直空间不足时自动切换为2x2布局，可根据实际需求调整minmax的第一个参数值。
• 合并了四个选项的重复样式，删除冗余代码，同时将复选框宽度改为固定值，避免百分比布局下的拉伸变形。
• 所有涉及尺寸的元素都添加了box-sizing: border-box规则，避免padding、border把元素撑出容器导致内容截断。
• 按钮的上下padding改用固定值，避免百分比规则下随容器高度变化导致样式异常。

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