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

但是它没有起作用。有没有可能使用grid嵌套元素？

- Lukf

---

你想使用什么样的CSS？这似乎不是基本的CSS，不仅仅是display: grid，而是你试图将.item1、.nest和.item2嵌套在.grid中。应该是类似于.grid{display: grid;} .item1{grid-row:1} .nest{grid-row:2} .item1{grid-row:3}这样的东西。此外，CSS不能将某些内容从表单外移动到表单内，这需要像Angular这样的框架。你能详细解释一下吗？有点难以理解你的意思。 - fabc

你不能使用CSS来创建嵌套结构样式，你应该使用Sass，而不是CSS。 - Ossama

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>

- doğukan