CSS Grid可以用网格容器的非直接子级填充网格区域吗？还是网格容器外部的元素？

Question

例如，说我想像普通列表项一样将2个项放在另一个上面。

<div id="container">
  <div id="item1"></div>
  <div id="item2"></div>
</div> 

如果我申请

#container {
    display: grid; 
    grid-template-areas: "item 1" "item 2";
}
#item1 { grid-area: "item1";}
#item2 { grid-area: "item2";}

我的问题是，我可以使用网格容器之外的其他内容来填充这些网格区域吗？例如。

<div id="container">
    <div id="item1">
</div>
<div id="item2"></div>

或：

<div id="container">
    <div id="inner-container">
        <div id="item1"></div>
        <div id="item2"></div>
    </div>
</div>

我正在使用Angular组件和父模板，我希望能以某种方式在1个组件内很好地显示我的HTML，而不是制作多个需要通过服务和/或eventEmitters相互通信的组件

感谢您的帮助！