I have 2 columns (both a DIV) with each multiple rows (also DIV per row). I made this with css grid and subgrid.

Now I would like to merge the 2nd row with the 3rd row of each column. The 4the row of both columns should be aligned to each other again.

In my example the empty red space of the 2nd row (1st column) should be gone and immediately after the text (Column 1 row 2) the text of Column 1 row 3 should begin. Column 2 row 3 in red would have some empty space to fill the bigger row 2 and row 3 of column 1. The start of the 4th rows are next to each other again.

<div class="main">
            <div class="column">
                <div class="row row-blue">Column 1 row 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec massa vel enim porttitor aliquam vel eget leo. Quisque vitae vulputate tellus.</div>
                <div class="row row-red row2">Column 1 row 2</div>
                <div class="row row-green row3">Column 1 row 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec massa vel enim porttitor aliquam vel eget leo. Quisque vitae vulputate tellus.</div>
                <div class="row row-yellow">Column 1 row 4</div>
            </div>
            <div class="column">
                <div class="row row-yellow">Column 2 row 1</div>
                <div class="row row-blue row2">Column 2 row 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec massa vel enim porttitor aliquam vel eget leo. Quisque vitae vulputate tellus.</div>
                <div class="row row-red row3">Column 2 row 3</div>
                <div class="row row-green">Column 2 row 4</div>
            </div>
        </div>

.main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.column {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
}

I searched everywhere for a solution. Normally it should be possible with a ‘grid-row: span 2’ I thought, but then my rows disappear.

Thanks in advance!