您可以设置details元素以显示网格吗？

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>

Codepen here!

Answer 1

必须将input的形式包装在<div>或其他容器中的细节中，以使display: grid起作用并对其进行样式设置。