Grid Layout on <Fieldset>... Bug on Chrome

Chrome issues with CSS Grid styled buttons

How about this?

<button>
   <div className="container">
       <div className="header"></div>
       <div className="child"></div>
       <div className="child"></div>
       <div className="child"></div>
       <div className="child"></div>
   </div>
</button>

column-count does not work within a fieldst in chrome

For anyone who may come across this, I was able to write a div within the fieldset and column count works great. Just add this wherever you can:

$( "fieldset" ).wrapInner( "<div></div>");

Can't position HTML legend tag with CSS Grid

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>

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

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>

Flex / Grid layouts not working on button or fieldset elements

The Problem

In some browsers the <button> element doesn't accept changes to its display value, beyond switching between block and inline-block. This means that a <button> element cannot be a flex or grid container, or a <table>, either.

In addition to <button> elements, you may find this constraint applying to <fieldset> and <legend> elements, as well.

See the bug reports below for more details.

Note: Although they cannot be flex containers, <button> elements can be flex items.

The Solution

There is a simple and easy cross-browser workaround to this problem:

Wrap the content of the button in a span, and make the span the flex container.

Adjusted HTML (wrapped button content in a span)

<div>
    <button>
        <span><!-- using a div also works but is not valid HTML -->
            <span>Test</span>
            <span>Test</span>
        </span>
    </button>
    <p>
        <span>Test</span>
        <span>Test</span>
    </p>
</div>

Adjusted CSS (targeted span)

button > span, p {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

Revised Demo

References / Bug Reports

Flexbox on a <button> blockifies the contents but doesn't establish a flex formatting context

User (Oriol Brufau): The children of the <button> are blockified, as dictates the flexbox spec. However, the <button> seems to establish a block formatting context instead of a flex one.

User (Daniel Holbert): That is effectively what the HTML spec requires. Several HTML container-elements are "special" and effectively ignore their CSS display value in Gecko [aside from whether it's inline-level vs. block-level]. <button> is one of these. <fieldset> & <legend> are as well.

Add support for display:flex/grid and columnset layout inside <button> elements

User (Daniel Holbert):

<button> is not implementable (by browsers) in pure CSS, so they are a bit of a black box, from the perspective of CSS. This means that
they don't necessarily react in the same way that e.g. a <div>
would.

This isn't specific to flexbox -- e.g. we don't render scrollbars if you put overflow:scroll on a button, and we don't render it as a
table if you put display:table on it.

Stepping back even further, this isn't specific to <button>. Consider <fieldset> and <table> which also have special rendering
behavior.

And old-timey HTML elements like <button> and <table> and <fieldset> simply do not support custom display values, other than
for the purposes of answering the very high-level question of "is this
element block-level or inline-level", for flowing other content around
the element.

Also see:

Flexbug #9: Some HTML elements can't be flex containers
10. Some HTML elements can't be grid containers

Why can't fieldset be flex containers?

According to Bug 984869 - display: flex doesn't work for button elements,

<button> is not implementable (by browsers) in pure CSS, so they are a
bit of a black box, from the perspective of CSS. This means that they
don't necessarily react in the same way that e.g. a <div> would.

This isn't specific to flexbox -- e.g. we don't render scrollbars if
you put overflow:scroll on a button, and we don't render it as a
table if you put display:table on it.

Stepping back even further, this isn't specific to <button>. Consider
<fieldset> ~~and <table>~~ which also have special rendering behavior:
data:text/html,<fieldset style="display:flex"><div>abc</div><div>def</div>
In these cases, Chrome agrees with us and disregards the flex
display mode. (as revealed by the fact that "abc" and "def" end up
being stacked vertically). The fact that they happen to do what you're
expecting on <button style="display:flex"> is likely just due to an
implementation detail.

In Gecko's button implementation, we hardcode <button> (and
<fieldset>, ~~and <table>~~) as having a specific frame class (and hence,
a specific way of laying out the child elements), regardless of the
display property.

If you want to reliably have the children reliably arranged in a
particular layout mode in a cross-browser fashion, your best bet is to
use a wrapper-div inside the button, just as you would need to inside
of ~~a <table> or~~ a <fieldset>.

Therefore, that bug was marked as "resolved invalid".

There is also Bug 1047590 - display: flex; doesn't work in <fieldset>, currently "unconfirmed".

Good news: Firefox 46+ implements Flexbox for <fieldset>. See bug 1230207.