Collapse or merge grid cells if content is not there - html

Question

If I have a grid like this:
Is there a way to automatically push the grid item 3 up to take the space of grid item 1?
Structure:
<div id="1"></div>
<div id="2">Content</div>
<div id="3">Content</div>
For grid item 2 I do this:
grid-row: 1 / span 2;
But i cannot do that for grid item 3 because then if there is content in item 1, it overlaps it. And in my case I do not know if there is content or not

Answer 1

It's almost automatic. Set for div2 the column 2 and the rows 1-2. And let the other divs to occupy the remaining space freely:
.container {
display: grid;
grid-template-columns: auto auto;
border: solid 1px red;
margin: 10px;
}
#div2 {
grid-row: 1 / span 2;
grid-column: 2;
background-color: yellow;
}
<div class="container">
<div id="1"></div>
<div id="div2">Content</div>
<div id="3">Content</div>
</div>
<div class="container">
<div id="1">1</div>
<div id="div2">Content</div>
<div id="3">Content</div>
</div>