css - 您可以将详细信息元素设置为显示网格吗？

Question

我想创建一个可以使用该<details>元素折叠的过滤器元素，因为它开箱即用，具有open/close功能。

但是，当涉及到内部字段的样式时，我想使用网格，似乎<details>不能设置为display: grid？

有没有人遇到过这种行为？

非常感谢您的意见！

details {
  display: grid;
  grid-template-columns: 100px 100px;
}

input {
  width: 100%;
}

label {
  display: block;
}

label:first-of-type {
  color: red;
  grid-column: 1;
}

label:last-of-type {
  color: blue;
  grid-column: 2;
}

<form>
  <details open>
    <summary>Filter</summary>
    <label>
        I should be on the left
        <input type="text">
      </label>
    <label>
        I should be on the right
        <input type="text">
      </label>
  </details>
</form>

代码笔在这里！

Answer 1

必须将表单input的细节包装在一个<div>或另一个容器中才能display: grid开始工作和设计样式。