在CSS网格中创建一行跨越所有列

Question

如何让<legend>跨越所有行，这样会弄乱<fieldset>，它被设计为3列CSS网格？

＆＃13;

＆＃13;

<fieldset>
  <legend>Personal Details</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>
</fieldset>

＆＃13;

＆＃13;

＆＃13;

CSS：

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

fieldset {
    display: contents;
}

Answer 1

使用可能更好：

fieldset legend {
       grid-column: 1/-1;
 }

或者如果您只需要3列

fieldset legend {
       grid-column: 1/ span 3;
 }

Answer 2

应用

fieldset legend {
    grid-column: 1/4;
}

到CSS。这使它跨越三列。