CSS网格嵌套元素[重复]答案

【问题标题】：CSS grid nested elements [duplicate]CSS网格嵌套元素[重复]
【发布时间】：2021-06-26 13:12:48
【问题描述】：

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

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

【问题讨论】：

你想使用什么样的 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。你能详细说明一下吗？有点难以理解你要问的意思
你不能用 CSS 做那种嵌套的样式结构，你应该用 Sass，而不是 CSS。

标签： html css nested css-grid

【解决方案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>

【讨论】：