How to display array of react components in matrix

I am new leaner and stuck with below question

I have an array of react components , and wanted to display the components in m X n matrix .

my code details :

        <IonRow className="ion-align-items-baseline " >
            <IonCol size-lg="3" size-md="4" size-sm="6" size="12" className='ion-no-padding ' >
           { (item) => <PrepareCard key={} info={item} />)}

With my code above i get one component per row irrespective of the device , but i need multiple components for row depending on the device .

Please let me know if additional details are required .

Thanks for helping !

found the answer with below code change

        <IonRow className="ion-align-items-baseline ion-no-padding ion-no-margin" >
          { (item) => <IonCol className="ion-no-padding ion-no-margin" size-lg="4" size-md="4" size-sm="6" size="12"> 
                                        <PrepareCard key={} info={item} /> 
                                        </IonCol>   ) }