Можете ли вы установить элемент данных для отображения сетки?

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 работал и стилизовал их.