Я использую React js. Я хочу использовать Grid, но не могу в данном конкретном случае. У меня есть компонент под названием CardComponent.js Проблема в том, что я использую функцию карты. Я не знаю, как пользоваться сеткой.
import React from "react";
const rows = [
{
id: 7,
email: "[email protected]",
first_name: "Michael",
last_name: "Lawson"
},
{
id: 8,
email: "[email protected]",
first_name: "Lindsay",
last_name: "Ferguson"
},
{
id: 9,
email: "[email protected]",
first_name: "Michael",
last_name: "Lawson"
},
{
id: 10,
email: "[email protected]",
first_name: "Lindsay",
last_name: "Ferguson"
}
];
const ElevatedCardHeader = () =>
rows.map(row => (
<Card className={"MuiElevatedCard--01"}>
<CardHeader
className={"MuiCardHeader-root"}
title={row.id}
subheader={row.email}
classes={{
title: "MuiCardHeader-title",
subheader: "MuiCardHeader-subheader"
}}
/>
<CardContent className={"MuiCardContent-root"}>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<Grid container>
<Grid container justify="space-evenly">
<label>first_name:</label>
<label>{row.first_name}</label>
</Grid>
</Grid>
<Divider light />
</Grid>
<Grid item xs={12} sm={6}>
<Grid container>
<Grid container justify="space-evenly">
<label>last_name:</label>
<label>{row.last_name}</label>
</Grid>
</Grid>
<Divider light />
</Grid>
</Grid>
</CardContent>
</Card>
));
export default ElevatedCardHeader;
Как я могу отображать 2 карточки в строке с помощью сетки? В настоящее время в каждой строке отображается по одной карточке. Здесь вы можете увидеть мой Codesandbox Спасибо за заранее за вашу помощь и руководство
