你可以设置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工作并设计它们。