使用reactjs Material ui在3列中显示我的卡片

import React from 'react';
import { Grid } from '@material-ui/core';

const CardGrid = () => {
  return (
    <Grid container spacing={2}>
      <Grid item xs={4}>
        {/* 第一列的卡片 */}
      </Grid>
      <Grid item xs={4}>
        {/* 第二列的卡片 */}
      </Grid>
      <Grid item xs={4}>
        {/* 第三列的卡片 */}
      </Grid>
    </Grid>
  );
};

export default CardGrid;

import React from 'react';
import { Card, CardContent, Typography } from '@material-ui/core';

const MyCard = () => {
  return (
    <Card>
      <CardContent>
        <Typography variant="h5" component="h2">
          Card Title
        </Typography>
        <Typography variant="body2" component="p">
          Card Content
        </Typography>
      </CardContent>
    </Card>
  );
};

export default MyCard;

import React from 'react';
import { Grid } from '@material-ui/core';
import MyCard from './MyCard';

const CardGrid = () => {
  return (
    <Grid container spacing={2}>
      <Grid item xs={4}>
        <MyCard />
      </Grid>
      <Grid item xs={4}>
        <MyCard />
      </Grid>
      <Grid item xs={4}>
        <MyCard />
      </Grid>
    </Grid>
  );
};

export default CardGrid;