孩子的CSS网格位置孩子[重复]

【问题标题】：CSS grid position children of children [duplicate]孩子的CSS网格位置孩子[重复]
【发布时间】：2020-05-08 02:59:53
【问题描述】：

我想知道是否可以在网格中定位网格容器的子项的子项？

假设我的元素层次结构是这样的：

<div class="grid-container">
  <div class="grid-item-1">
       ....
  </div>
  <div class="grid-item-2">
     ....
  </div>
   <div class="layer-2">
         <div class="grid-item-3">
                ....
         </div>
         <div class="grid-item-4">
                ....
         </div>
   </div>
</div>

我希望来自grid-item-3 的单元格能够像grid-container 的直接子代一样运行。

或者我应该单独处理网格项的每个子容器吗？

【问题讨论】：

标签： html css css-grid

【解决方案1】：

你在找这个吗？

.grid-container{
  width:100%;
  padding: 5px;
  background-color:grey;
}

.grid-container div{
    background-color:yellow;
    padding: 5px;
    display:flex;
    width;100%;
}

.grid-container div div{
    background-color:white;
    margin: 5px;
}

.grid-container div div:nth-child(1){
    width: 40%;
}

.grid-container div div:nth-child(2){
    width: 50%;
}

.grid-container div div:nth-child(3){
    width: 10%;
}

<div class="grid-container">
   <div>
         <div>
                Row 1 - Cell 1 (40%)
         </div>
         <div>
                Row 1 - Cell 2 (50%)
         </div>
         <div>
                Row 1 - Cell 3 (10%)
         </div>
   </div>
   <div>
         <div>
                Row 2 - Cell 1 (40%)
         </div>
         <div>
                Row 2 - Cell 2
         </div>
         <div>
                Row 3 - Cell 3
         </div>
   </div>
</div>

【讨论】：

不，这不是我想要的功能。我将尝试编辑我的答案，并提供更多详细信息。对不起）
这甚至没有使用 css-grids...