Maintaining column range with nextGroupKey?

[JohnRSim]

Description

I want the items within the grid to be the same width and height and maintain the columnRange. ie if I setup columnRange=5 then each column would have 5 items per row.

The problem I'm seeing is if I have 10 items in a groupKey then even if I set columnRange as 5 I could have 6 columns in 1 row and then 4 in the next depending on the width of the items?

As I load more data I have the same - next row loads 6 and the following 4 as the grouping is by 10.

The grid container is designed to be resizable and I run renderItems after the container is resized aswell as sending updated columnRange

Steps to check or reproduce

I've gone through and tried changing the params but I'm not having any luck - have I missed something?

    <JustifiedInfiniteGrid
        bind:this={gridContainer}
        scrollContainer=".CMB-AssetPanel"
        class="container"
        gap={20}
        isEqualSize={true}
        isConstantSize={false}
        rowRang={0}
        autoResize={true}
        isCroppedSize={false}
        useTransform={false}
        columnRange={1,columns}
        {items}
        on:requestAppend={({ detail: e }) => {
            //only display based on total assets
            if (items.length < assets?.items.length) {

                const nextGroupKey = (+e.groupKey || 0) + 1;

                items = [...items, ...getItems(nextGroupKey, 10)];
                //console.log("items", items.length);
            }
        }}
        let:visibleItems
    >

here is an example screenshot I've loaded 20 items with 2 groupKeys of 10 items and you can see the first 2 rows are 4 cols and the 3rd row is 2 cols - it should be 4.