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

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 工作和设置样式。