Collapse or merge grid cells if content is not there

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

The addition is that what I do is slot item 2 between item 1 and 3 when the screen size is smaller, not sure if thats possible with flex — strangeQuirks, Feb 02 '18 at 19:37

score 1 · Answer 1 · answered Feb 02 '18 at 20:17

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>

Collapse or merge grid cells if content is not there

1 Answers1