html - CSS 网格嵌套元素

Question

我的css网格有问题。我不知道这是否可能。

我的 DOM 看起来像：

<div class="grid">
  <div class="nest">Item i want to nested</div>
  <form>
    <div class="item1">Item 1</div>
    <div class="item1"> Item 2</div>
  </form>
</div>

我需要在“item1”和“item2”之间放置“nest”元素

我试过这样使用网格

.grid {
  display: grid;
  .item1 { grid-row: 1}
  .nest {grid-row: 2}
  .item2 {grid-row: 3}
}

但它没有用。有没有可能用网格嵌套元素？

Answer 1

如果可以display: contents用于表格，这是可能的。

.grid {
  display: grid;
}

form {
  display: contents;
}

.item1 {
  grid-row: 1
}

.nest {
  grid-row: 2
}

.item2 {
  grid-row: 3
}

<div class="grid">
  <div class="nest">Item i want to nested</div>
  <form>
    <div class="item1">Item 1</div>
    <div class="item2"> Item 2</div>
  </form>
</div>