Can CSS Grid fill a grid-area with a non-direct child of the grid container? Or an element outside the grid container?

Question

For example, say I want to have 2 items on top of each other like a normal list item.

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

This would work if I apply

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

My question is, can I use other content outside of the grid container to fill these grid areas? eg.

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

or:

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

I am working with Angular components and parent templates and I'm hoping to have some way to display my HTML nicely inside of 1 component instead of making multiple components that need to communicate with each other via services and/or eventEmitters, etc.

Thanks for your help!