1

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!

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
mcheah
  • 1,209
  • 11
  • 28

1 Answers1

1

From MDN: "When you add display: grid to a grid container, only the direct children become grid items and can then be placed on the grid that you have created. The children of these items display in normal flow." Link to MDN article

So in your first option:

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

item 2 won't be affected by the container because it's outside of the "container" div tags.

In your second option:

<div id="container">
<div id="inner-container">
    <div id="item1"></div>
    <div id="item2"></div>
</div>
You need to use Subgrid, by making "inner-container" a grid container.
Jean Nicolas
  • 11
  • 1