含FIELDSET的表单CSS Grid布局问题：避免嵌套网格结构

API 探路者

2026-7-16

解决CSS Grid表单多列布局中FIELDSET导致的嵌套网格问题

核心思路

通过精准判断表单结构，控制Grid布局的应用对象：

若表单无直接子元素FIELDSET，则为FORM应用Grid布局
若表单有直接子元素FIELDSET，则为FIELDSET应用Grid布局，同时重置FORM的默认显示方式避免嵌套

CSS原生解决方案（现代浏览器）

利用:has()伪类直接检测表单结构，无需额外JS：

/* 定义通用Grid布局样式 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 1rem;
}

/* 无直接子FIELDSET的表单，应用Grid */
form:not(:has(> fieldset)) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 1rem;
}

/* 有直接子FIELDSET的表单，恢复默认块级显示 */
form:has(> fieldset) {
  display: block;
  padding: 0;
}

/* 给表单的直接子FIELDSET应用Grid */
form:has(> fieldset) > fieldset {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 1rem;
}

注：如果使用Sass/LESS，可以用@extend .form-grid简化重复代码，原生CSS直接复制样式即可。

兼容旧版浏览器的JS辅助方案

针对不支持:has()的旧版浏览器，用JS动态分配Grid类：

/* 通用Grid样式 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 1rem;
}

/* 表单默认样式 */
form {
  display: block;
  padding: 0;
}

// 遍历所有表单，根据结构动态添加Grid类
document.querySelectorAll('form').forEach(form => {
  const directFieldset = form.querySelector('> fieldset');
  if (directFieldset) {
    directFieldset.classList.add('form-grid');
  } else {
    form.classList.add('form-grid');
  }
});