Material UI Grid keeps displaying as a column - reactjs

Question

I have been working with Material UI grid and I am trying to display data in a grid of cards that show in rows as opposed to a single column. My grid currently displays like this stacked in a column(please ignore the size of the cards this is just a zoomed in screenshot):
I would like the grid to display like this in rows as opposed to a single column:
I feel like I'm missing something simple but I'm just not sure why it keeps stacking in a single column. The code is as follows:
import React, { useState, useEffect } from "react"
// components
import Grid from "#material-ui/core/Grid"
import { makeStyles } from "#material-ui/core/styles"
import axios from "axios"
import RepoCard from "../components/RepoCard"
import Container from "#material-ui/core/Container"
// context
const Profile = () => {
const [data, setData] = useState(null)
const fetchGit = () => {
axios
.get(`https://api.github.com/users/rterrell25/repos?`)
.then((res) => {
setData(res.data)
console.log(res.data)
})
.catch((err) => console.log(err))
}
useEffect(() => {
fetchGit()
}, [])
return (
<div style={{ marginTop: 85 }}>
{!data ? (
<h1>Loading...</h1>
) : (
data.map((user) => (
<Container>
<Grid container spacing={4}>
<RepoCard name={user.name} />
</Grid>
</Container>
))
)}
</div>
)
}
export default Profile
the Repo Card Component code:
import React from "react"
import { Link } from "react-router-dom"
// MUI stuff
import Button from "#material-ui/core/Button"
import { makeStyles } from "#material-ui/core/styles"
import Card from "#material-ui/core/Card"
import CardActions from "#material-ui/core/CardActions"
import CardContent from "#material-ui/core/CardContent"
import CardMedia from "#material-ui/core/CardMedia"
import Grid from "#material-ui/core/Grid"
import Typography from "#material-ui/core/Typography"
const useStyles = makeStyles((theme) => ({
icon: {
marginRight: theme.spacing(2),
},
heroContent: {
backgroundColor: theme.palette.background.paper,
padding: theme.spacing(8, 0, 6),
},
heroButtons: {
marginTop: theme.spacing(4),
},
cardGrid: {
paddingTop: theme.spacing(8),
paddingBottom: theme.spacing(8),
},
card: {
height: "100%",
display: "flex",
flexDirection: "column",
},
cardMedia: {
paddingTop: "56.25%", // 16:9
},
cardContent: {
flexGrow: 1,
},
footer: {
backgroundColor: theme.palette.background.paper,
padding: theme.spacing(6),
},
}))
const MovieCard = ({ name }) => {
const classes = useStyles()
return (
<Grid item xs={12} sm={6} md={4}>
<Card className={classes.card}>
<CardMedia
className={classes.cardMedia}
image={"#"}
title='Movie nane'
/>
<CardContent className={classes.cardContent}>
<Typography gutterBottom variant='h5' component='h2'>
"Movie name"
</Typography>
<Typography>Genre: Comedy</Typography>
<Typography noWrap>"Movie Summary"</Typography>
</CardContent>
<CardActions>
<Link to={""}>
<Button size='small' color='primary'>
Details
</Button>
</Link>
</CardActions>
</Card>
</Grid>
)
}
export default MovieCard

Answer 1

Change the xs={12} to xs={4}
The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design’s responsive UI is based on a 12-column grid layout.
Refer: document of Material-UI Grid