How to display array of react components in matrix

Ionic Framework Ionic React
1

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 ' >
           { Data.map( (item) => <PrepareCard key={item.id} info={item} />)}
            </IonCol>
        </IonRow>
</IonGrid>

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 !

2

found the answer with below code change

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