Как я могу использовать наборы полей в форме с сеткой CSS?

Question

Я хочу использовать <fieldset> для семантического HTML.Я использую сетку 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;
}

<form action="#" method="POST">

  <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>

</form>

Все это прекрасно работает (и в моей настоящей форме у меня есть шаблон <label> -> <input> -> <span>, повторенный несколько раз).

Проблема в том, что - если я оберну несколько экземпляров этого шаблона в <fieldset>, который я хочу сделать для личных данных, банковских реквизитов и т. Д., Потому что тогда <fieldset> s являются прямыми потомкамиэлемент с display: grid; помещает их в сетку, а не элементы формы.Как я могу обойти это?