Can't position HTML legend tag with CSS Grid

Question

The Problem

I have a form with multiple fieldsets and a legend tag for accessibility reasons. I want the legend tag to be below the input field. Since I am using CSS Grid for the fieldset, the only way to get it working (on firefox) is to give the legend tag an absolute positioning.

In other browsers, such as Chrome and Edge this does not seem to render properly. What am I doing wrong? Why can't I seem to use CSS Grid to position a legend tag?

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

<fieldset>
<legend>An accessible description</legend>
<label>Field</label>
<input type="text">
</fieldset>

<fieldset>
<legend>An accessible description</legend>
<label>Field</label>
<input type="text">
</fieldset>

Screenshot in Firefox (this is what I want to achieve)

Screenshot in Chrome

My Research so far

MDN says:

The <legend> element is okay to style, but it can be a bit tricky to control placement of it. By default it is always positioned over the top border of its <fieldset> parent, near the top left corner. To position it somewhere else, for example inside the fieldset somewhere, or near the bottom left corner, you need to rely on positioning.

https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms

But it doesn't seem to mention CSS Grid anywhere saying that it wouldn't work. Why shouldn't it? It works with all other elements too.

Answer 1

The problem is not with <legend> but with <fieldset> as grid which does not work in chrome.

Refer: Grid layout on <fieldset>... Bug on chrome?

So you need to add a grid wrapper inside the <fieldset>.

.grid-container {
  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;
}

<fieldset>
  <div class="grid-container">
    <legend>An accessible description</legend>
    <label>Field</label>
    <input type="text">
  </div>
</fieldset>

<fieldset>
  <div class="grid-container">
    <legend>An accessible description</legend>
    <label>Field</label>
    <input type="text">
  </div>
</fieldset>