Mansory just resizing once

[frcelipe7]

I'm trying to resize my Mansory layout but its just resizing once. I'm triggering a window.dispatchEvent(new Event('resize')) event but its working just once.

JS:

var elem = document.querySelector('.display_content');
var msnry = new Masonry(elem, {
    itemSelector: '.section',
    percentPosition: true,
});

CSS:

.display_content {
    width: auto; height: auto;
    margin: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

.display_content .section {
    height: fit-content;
    padding: 20px;
    border-radius: 5px;
    width: calc(50% - 10px);
    margin: 5px;
}

The .section height is variable and when I change it I trigger window.dispatchEvent(new Event('resize')). There is a table inside the .section

<div class="display_content">
    <div class="section ">
        <table>
            <tr><th>something</th><th>something</th></tr>

            <tr><td>something</td><td>something</td></tr>
            <tr><td>something</td><td>something</td></tr>
        </table>
    </div>
</div>

I change the section height by deleting a table row with tr.outerHTML = "". When it is deleted, the table and section height are changed. As I said, the Mansory layout just resize in the first time.

When I want to add a table row in the table I just:

let tr = document.createElement('tr');
tr.innerHTML = `
    <td >adding something</td>
    <td >adding something</td>
`;
document.querySelector("table").append(tr);

window.dispatchEvent(new Event('resize'));

Can you help me?

[frcelipe7]

Solution: I just added an event listener for window resize

window.addEventListener('resize', () => {
    msnry.layout();
});