Невозможно разместить тег легенды HTML с помощью CSS Grid ⇐ CSS

[Anonymous]

Проблема
У меня есть форма с несколькими наборами полей и тегом легенды из соображений доступности. Я хочу, чтобы тег легенды находился под полем ввода. Поскольку я использую CSS Grid для набора полей, единственный способ заставить его работать (в Firefox) — это придать тегу легенды абсолютное позиционирование.
В других браузерах, таких как Chrome и Edge, похоже, не отображается должным образом. Что я делаю неправильно? Почему я не могу использовать CSS Grid для размещения тега легенды?

Код: Выделить всё

fieldset {
display: grid;
grid-template-columns: minmax(max-content, 12vw) auto;
grid-template-rows: auto auto;

position: relative;
padding-bottom: 2em;
}

fieldset legend {
position: absolute;
margin: 0;
padding: 0;

/**
* Suggested by user Kamel
* AFAIK legend is styled a block element by default.
* It definitely is for Firefox
*/
display: block;

grid-column: 2 / 3;
grid-row: 2 / 3;
}

Код: Выделить всё

An accessible description
Field




An accessible description
Field

Снимок экрана в Firefox (это то, чего я хочу добиться)
Снимок экрана в Chrome
Мои исследования
MDN говорит:

Элемент можно стилизовать, но его можно немного сложно контролировать его размещение. По умолчанию он всегда располагается над верхней границей родительского элемента , рядом с верхним левым углом. Чтобы разместить его где-нибудь еще, например внутри набора полей или рядом с нижним левым углом, вам нужно полагаться на позиционирование.

https:// Developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms
Но, похоже, нигде не упоминается CSS Grid, говорящий о том, что он не будет работать. Почему бы и нет? Это работает и со всеми остальными элементами.

Подробнее здесь: https://stackoverflow.com/questions/626 ... h-css-grid