I have a layout with a bunch of cards that looks like this

Page 1
[] [] []
[] [] []
[] [] []
--------
Page 2
[] [] []
[] [] []
[] [] []

And I have an array that has the order of the cards inside the layout that looks like this:

const orderItems = [{ order: 1.2, cardID: 123 }, { order: 1.4, cardID: 145 }, { order: 1.5, cardID: 167 }, { order: 2.1, cardID: 189 }];

The order represents the page number for the integer (1,2) and the decimal represents the position (2, 4, 5). So, how can I accommodate my layout in such a way that the cards are ordered by the position, and if there are less than 9 cards, the rest of the page is filled with blank spaces?

This is how I have my layout right now:

export default function CardsList({ cards, isOnList, listID }) {
    const { isLoading, isError, error, data } = useInventoryItemsForCards(cards.map((card) => card !== null && card._id));

    return (
        <>
            <LoadingAndErrorCentered isLoading={isLoading} isError={isError} error={error} />
            <Row className='justify-content-md-center'>
                {data &&
                    cards.map((card, index) => {
                        return (
                            card != null && (
                                <Card key={card._id} card={card} inventoryItem={data[index]} isOnList={isOnList} listID={listID} />
                            )
                        );
                    })}
            </Row>
        </>
    );
}

cards is my array of cards, and they are already ordered by their page number and position.