CSS Grid Firefox vs Chrome difference with grid-template-columns

Question

The following snippet was designed for use in Firefox (79.0a1 from 2020-06-24), where the CSS grid is behaving as I expected (label and input on the same row, submit spanning the width of the fieldset). In Chrome (83.0.4103.116), the label and input go on different rows and the submit button is as narrow as its value allows.

<!DOCTYPE html>
<html lang="en">

<head>
  <style type="text/css">
    input[type="submit"] {
      display: block;
      grid-column-start: 1;
      grid-column-end: 3;
    }
    
    label {
      display: block;
      text-align: right;
    }
    
    fieldset {
      display: grid;
      grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
    }
  </style>
</head>

<body>
  <form action="/login" method="post">
    <fieldset>
      <label for="email">Email address</label>
      <input type="email" name="email">
      <input type="submit" value="Sign in">
    </fieldset>
  </form>
</body>

</html>

Is this a browser bug or am I doing something silly?

Also reported as a webcompat issue: https://github.com/webcompat/web-bugs/issues/54609 — djc, Jun 25 '20 at 09:58

score 1 · Accepted Answer · edited Jun 25 '20 at 11:12

The grid value for display doesn't seem to work on certain elements such as <fieldset> and is listed as an issue here:

Stackoverflow, "Grid layout on fieldset bug on Chrome"
Chromium, "Issue 375693: [css-flex][css-grid] Flexbox/grid layout model does not work on fieldset elements"

As mentioned in the related thread on Stackoverflow, using display: contents on the fieldset instead might be a workaround:

input[type="submit"] {
  display: block;
  grid-column-start: 1;
  grid-column-end: 3;
}
    
label {
  display: block;
  text-align: right;
}
    
form {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
}
    
fieldset {
  display: contents;
}

  <form action="/login" method="post">
    <fieldset>
      <label for="email">Email address</label>
      <input type="email" name="email">
      <input type="submit" value="Sign in">
    </fieldset>
  </form>

I'd note that MDN mentions there might be some issues with accessibility, as the <fieldset> — but not its descendants — will supposedly be invisible to screen reading technology. I haven't been able to test this with Orca, NVDA and other similar screen reading software yet.

CSS Grid Firefox vs Chrome difference with grid-template-columns

1 Answers1

Linked