css - 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”值，但没有帮助。

我错过了什么？

标签： csscss-grid

Answer 1

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