CSS grid nested elements [duplicate]

Question

I have a problem with the css grid. I don't know if it is possible at all.

My DOM looks like:

<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>

I need to put "nest" element between "item1" and "item2"

I tried use grid like that

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

but it did not work. Is any possibility to nest element with grid?

Answer 1

If it's okay to use display: contents for the form, it's possible.

.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>