如何在CSS Grid布局的表单中使用fieldset元素？

我懂你遇到的痛点：本来用CSS Grid把表单布局得好好的，结果为了语义化分组加了<fieldset>之后，里面的label、input全乱套了。这其实是因为CSS Grid只作用于容器的直接子元素——原来的form是Grid容器，label/input/span都是它的直接子元素，自然能按网格排列；但加了<fieldset>之后，fieldset变成了form的直接子元素，内部的表单元素变成了fieldset的子元素，就脱离了form的Grid布局范围了。

下面给你两种实用的解决方案，按需选择：

方案1：用display: contents（最优雅，推荐现代浏览器场景） #

这个CSS属性可以让<fieldset>“隐身”在布局树里，它的子元素会直接成为form的子元素，完美兼顾语义化和布局需求，几乎不需要改动原有的代码。

修改后的CSS：

form {
  display: grid;
  grid-template-columns: minmax(100px, max-content) minmax(200px, max-content) minmax(200px, 1fr);
  grid-gap: 10px;
}

.field__label {
  text-align: right;
}

/* 新增fieldset样式 */
form fieldset {
  display: contents;
  border: none; /* 可选：默认fieldset有边框，用display:contents后边框不会显示，所以可以去掉 */
}

对应的HTML结构（分组后的样子）：

<form action="#" method="POST">
  <!-- 个人信息组 -->
  <fieldset>
    <label class="field__label" for="first-names"> First names </label>
    <input class="form__entry" id="first-names" type="text" name="firstName">
    <span class="form__feedback form__instructions"> Must only use letters, spaces, hyphens and apostrophes </span>
  </fieldset>

  <!-- 另一组信息 -->
  <fieldset>
    <label class="field__label" for="last-name"> Last name </label>
    <input class="form__entry" id="last-name" type="text" name="lastName">
    <span class="form__feedback form__instructions"> Must only use letters, hyphens and apostrophes </span>
  </fieldset>
</form>

注意：display: contents不支持IE浏览器，但Chrome、Firefox、Safari等现代浏览器都已经支持了，适合大多数现代项目。

方案2：让fieldset跨列并内部复用Grid（兼容旧浏览器，支持视觉分组） #

如果需要兼容旧浏览器，或者想保留fieldset的边框、legend标题做视觉区分，可以用这种方法：让fieldset占满form的所有列，然后在fieldset内部也应用和form一样的Grid布局，保证内部元素对齐。

修改后的CSS：

form {
  display: grid;
  grid-template-columns: minmax(100px, max-content) minmax(200px, max-content) minmax(200px, 1fr);
  grid-gap: 10px;
}

.field__label {
  text-align: right;
}

/* 让fieldset跨所有列，并内部复用Grid */
form fieldset {
  grid-column: 1 / -1; /* 从第1列到最后一列 */
  display: grid;
  grid-template-columns: inherit; /* 继承form的列模板，保证对齐 */
  grid-gap: inherit; /* 继承间距 */
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 15px;
}

/* 给legend加个样式，让它更美观 */
form fieldset legend {
  padding: 0 8px;
  font-weight: bold;
  margin-bottom: 10px;
}

对应的HTML结构（带视觉分组）：

<form action="#" method="POST">
  <fieldset>
    <legend>个人基本信息</legend>
    <label class="field__label" for="first-names"> First names </label>
    <input class="form__entry" id="first-names" type="text" name="firstName">
    <span class="form__feedback form__instructions"> Must only use letters, spaces, hyphens and apostrophes </span>

    <label class="field__label" for="last-name"> Last name </label>
    <input class="form__entry" id="last-name" type="text" name="lastName">
    <span class="form__feedback form__instructions"> Must only use letters, hyphens and apostrophes </span>
  </fieldset>

  <fieldset>
    <legend>银行账户信息</legend>
    <label class="field__label" for="bank-account"> 银行账号 </label>
    <input class="form__entry" id="bank-account" type="text" name="bankAccount">
    <span class="form__feedback form__instructions"> 请输入有效的16位银行卡号 </span>
  </fieldset>
</form>

这种方法的好处是兼容性强，还能通过fieldset的边框和legend清晰区分不同表单区域，适合需要视觉分组的场景。

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