如何通过CSS（Flex/Grid）实现表单字段的条件式行列布局？

可以通过CSS结合:has()选择器实现完全无JS的动态布局，完美匹配你的需求：

Flexbox 方案 #

/* 字段容器基础样式 */
.form-field-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 自定义字段间间距 */
}

/* 默认规则：字段数≤3时，每行3个字段 */
.form-field-group > .form-field {
  flex: 1 1 calc(100%/3 - (16px * 2/3));
  min-width: 200px; /* 防止字段过窄，可按需调整 */
}

/* 当容器存在第4个字段时，切换为每行2个 */
.form-field-group:has(> .form-field:nth-child(4)) > .form-field {
  flex: 1 1 calc(50% - 8px);
}

CSS Grid 方案 #

/* 字段容器基础样式 */
.form-field-group {
  display: grid;
  gap: 16px;
  /* 默认3列布局，≤3个字段自动占满一行 */
  grid-template-columns: repeat(3, 1fr);
}

/* 存在第4个字段时，切换为2列布局 */
.form-field-group:has(> .form-field:nth-child(4)) {
  grid-template-columns: repeat(2, 1fr);
}

说明 #

• :has()选择器能直接检测父容器内是否存在第4个子元素，从而触发布局切换，目前现代浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）均已支持。
• 如果需要兼容旧版浏览器，可采用CSS计数器结合动态样式的方案，但实现复杂度较高，:has()是当前最简洁的实现方式。
• 可根据设计需求调整gap、min-width等参数。

内容的提问来源于stack exchange，提问作者Mr. C0de