2

I am trying to setup a multi column grid inside a form element :

    fieldset#size-sub {
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    /*grid-auto-rows: 100px;*/
    }
    #size-sub div {
    grid-row: auto;
    grid-column: auto;
    }
 <fieldset id="size-sub"><legend>Size</legend>
      <div id="group-1"></div>
      <div id="group-2"></div>
      <div id="group-3"></div>
      <div id="group-4"></div>
      <div id="group-5"></div>
    </fieldset>

each div element encapsulates a few text type input fields(border-box styled and 100% width). The above works in Firefox as intended, however in Chrome, div elements are stacked on top of each other just as if they were not styled at all. I tried adding a 'grid-auto-rows' value but it did not help.

What am I missing ?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
mmo7534
  • 33
  • 6

1 Answers1

0

After replacing fieldset with a div and ammending the css accordingly solves the layout issue.

mmo7534
  • 33
  • 6