CSS grid nested elements

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?

What kind of CSS are you trying to use? This does not seem like base-CSS, not so much the `display: grid` but rather the fact that you've attempted to nest `.item1`, .nest``and `.item2` inside of `.grid`. It should be something akin to `.grid{display: grid;} .item1{grid-row:1} .nest{grid-row:2} .item1{grid-row:3}`. Not just that, but CSS doesn't move something from outside of a form into it, that would be something you'd need a framework for, like Angular. Would you kindly elaborate a little more? It's kinda hard to grasp what you're meaning to ask — fabc, Mar 30 '21 at 14:03
You can't do that nested style structure with CSS, you should work with Sass, not CSS. — Ossama, Mar 30 '21 at 14:13

score 3 · Accepted Answer · answered Mar 30 '21 at 14:15

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>

CSS grid nested elements

1 Answers1