Материал UI Grid продолжает отображаться в виде столбца

Question

Я работал с сеткой пользовательского интерфейса материала и пытаюсь отобразить данные в сетке карточек, которые отображаются в строках, а не в одном столбце. Моя сетка в данный момент отображается в виде столбца (пожалуйста, не обращайте внимания на размер карточек, это просто увеличенный скриншот):

Я бы хотел, чтобы сетка отображалась как это в строках, а не в одном столбце:

Мне кажется, что я упускаю что-то простое, но я просто не уверен, почему оно продолжает складываться в одном столбце. Код выглядит следующим образом:

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

Код карты репо:

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

Измените xs={12} на xs={4}

Сетка обеспечивает визуальную согласованность между макетами, одновременно обеспечивая гибкость в самых разных проектах. Отзывчивый пользовательский интерфейс Material Design основан на 12-колоночном макете сетки.

---

См. Документ Material-UI Grid