Tengo un diseño con un montón de tarjetas que se ve así

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

Y tengo una matriz que tiene el orden de las tarjetas dentro del diseño que se ve así:

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

El orden representa el número de página para el número entero (1,2) y el decimal representa la posición (2, 4, 5). Entonces, ¿cómo puedo acomodar mi diseño de tal manera que las tarjetas estén ordenadas por la posición, y si hay menos de 9 tarjetas, el resto de la página se llena con espacios en blanco?

Así es como tengo mi diseño en este momento:

 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 es mi conjunto de tarjetas, y ya están ordenadas por su número de página y posición.