CODEWITHSUNDEEP
reactjsmaterial-ui
Rob Terrell
Rob Terrell

Reputation: 2562

Material UI Grid keeps displaying as a column

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): enter image description here

I would like the grid to display like this in rows as opposed to a single column: enter image description here

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

Upvotes: 2

Views: 1493

Answers (1)

keikai
keikai

Reputation: 15186

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

Upvotes: 2

Related Questions