I'm working on an app that displays athlete data in a grid using MUI Grid. The colors on the left border are based on which social network is associated with that card.

What I want to do is have a column for each social network, one for facebook, one for instagram, and one for reddit. That way each column will have the same color cards.

I just cant seem to figure out how to go about doing this. the data from my API is already sorted by social network, but Mui is taking the data from my API and adding the cards row by row instead of column by column.

Here is my code for the athletes cards

import React from 'react'
import { AthleteCardContainer, AthleteImage, AthleteDetailsContainer, TopContainer, BottomContainer, FBLogo, RedditLogo, InstaLogo, LinkIconLogo } from '../styles/athlete-styles'

export const AtheleteCard = ({athlete}) => {

    function numFormatter(num) {
        if(num > 999 && num < 1000000){
            return (num/1000).toFixed(1) + 'K';
        }else if(num > 1000000){
            return (num/1000000).toFixed(1) + 'M'; 
        }else if(num < 900){
            return num; 
        }
    }

  return (
    <AthleteCardContainer social={athlete.platform}>

        <AthleteImage src={athlete.profileImage}/>

        <AthleteDetailsContainer>
            <TopContainer>
            <h1>{athlete.name}</h1>
            <span>@{athlete.handle}</span>
            </TopContainer>
            <BottomContainer>
          
            <h3>{athlete.platform === "Instagram" ?  <InstaLogo/> : athlete.platform === "Facebook" ? <FBLogo/> : athlete.platform === "Reddit" ? <RedditLogo/> : null} {numFormatter(athlete.subscriberCount)}</h3>
            <a href={athlete.url}><p><LinkIconLogo/>{athlete.url}</p></a>
            </BottomContainer>
        </AthleteDetailsContainer>

    </AthleteCardContainer>
  )
}

and my code for the grid itself

export const Athletes = () => {
  const dispatch = useDispatch();
  const athletes = useSelector(state => state.athleteReducer.athletes.athletes)
  

  useEffect(() => {
    dispatch(actions.getAthletes());
  }, [])
  
  console.log(athletes, "from selector")

  return (
  <div>
    <Grid container >
    {athletes.map(athlete => (
      <Grid item xs={12} md={6} lg={4}>
      <AtheleteCard athlete={athlete}/>
    </Grid>
    ))}
    </Grid>
  </div>
  );
};