Chrome的网格列问题

Question

我正在尝试在表单元素中设置多栏网格：

​

    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>

​

每个div元素封装了几个文本类型的输入字段(边框样式和100%宽度)。上面的代码在Firefox中正常工作，但是在Chrome中，div元素堆叠在一起，就像它们根本没有样式一样。我尝试添加一个'grid-auto-rows‘值，但是没有帮助。

我错过了什么？

Answer 1

在用div替换fieldset并相应地修改css之后，解决了布局问题。