如何调整HTML表单格式，将section区块排列为多列布局

你可以通过CSS Grid布局实现需求，无需修改现有section-container区块的内部代码，仅需在外层新增一个父容器并添加对应样式即可。

方案1：自适应列数（优先推荐） #

会根据屏幕宽度自动调整展示的列数，不会出现内容挤压：

HTML结构 #

在所有section-container外层包裹一个自定义父容器：

<div class="form-sections-wrapper">
  <!-- 此处放置你30-40个现有section-container区块，内部代码无需修改 -->
  <div class="section-container">
    <ul class="selection-list">
      <div class="item-group">
      <label>What symptoms are they experiencing?</label><br />
      <input type="checkbox" name="depPresent[]" id="depPresent" value="anxiety" />Depressed Mood
      <br />
      Severity: &nbsp;
      <input type="radio" name="sxDep" id="sxDepMild" value="mild" required />Mild &emsp; 
      <input type="radio" name="sxDep" id="sxDepModerate" value="moderate" required />Moderate &emsp;
      <input type="radio" name="sxDep" id="sxDepSevere" value="severe" required />Severe &emsp;
      <br />
      Notes:<li><input type="text" name="depNotes[]" id="depNotes" value="" /></li>
      </div>
    </ul>
  </div>
  <!-- 更多section-container区块... -->
</div>

CSS样式 #

.form-sections-wrapper {
  display: grid;
  /* 每列最小宽度可根据你的区块实际宽度调整，这里设为300px */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px; /* 控制区块之间的行、列间距 */
  padding: 20px; /* 父容器内边距，可自行调整 */
}

/* 可选：优化单个区块的展示效果，可根据需求修改 */
.section-container {
  border: 1px solid #e5e7eb;
  padding: 16px;
  border-radius: 6px;
  background: #ffffff;
}

方案2：固定3列 #

默认固定展示3列，小屏幕自动适配为更少列数：

CSS样式 #

.form-sections-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 固定3列 */
  gap: 20px;
  padding: 20px;
}

/* 平板端适配为2列 */
@media (max-width: 992px) {
  .form-sections-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 移动端适配为1列 */
@media (max-width: 768px) {
  .form-sections-wrapper {
    grid-template-columns: 1fr;
  }
}

.section-container {
  border: 1px solid #e5e7eb;
  padding: 16px;
  border-radius: 6px;
  background: #ffffff;
}

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