Chakra Card component is mapping vertically rather than horizontally - css

Question

I am trying to render a card and map each card as a row of three (even better if this number is altered responsively).
I'm unsure as to which lines of code are overriding SimpleGrid, and have tried to use Grid and Flex. I do not have any CSS either.
I have attached the code that I am rendering.
return (
<>
{data.map((item: ICard, index: number) => (
<SimpleGrid columns={3} minChildWidth="30%" py={6} ml={10} key={index}>
<Box
maxW={"445px"}
w={"full"}
boxShadow={"2xl"}
rounded={"md"}
p={6}
overflow={"hidden"}
>
<Box
h={"310px"}
bg={"gray.100"}
mt={-6}
mx={-6}
mb={6}
pos={"relative"}
>
<div
style={{
height: 310,
width: 445,
backgroundImage: `url(${
item.edmIsShownBy ?? item.edmPreview
})`,
backgroundSize: "cover",
backgroundPosition: "middle",
}}
></div>
</Box>
<Stack>
<Text
color={"green.500"}
textTransform={"uppercase"}
fontWeight={800}
fontSize={"sm"}
letterSpacing={1.1}
>
{item.dcCreator ?? searchTerm ?? "Unknown Artist"} {item.year}
</Text>
<Heading fontSize={"2xl"} fontFamily={"body"}>
{item.title}
</Heading>
<Text color={"gray.500"} noOfLines={4}>
{item.dcDescription ?? item.dcDescriptionLangAware}
</Text>
</Stack>
<Stack mt={6} direction={"row"} spacing={4} align={"center"}>
<Avatar
src={item.edmPreview ?? item.edmIsShownBy}
alt={"Author"}
/>
<Stack direction={"column"} spacing={0} fontSize={"sm"}>
<Text fontWeight={600}>
{item.dataProvider}, {item.country}
</Text>
<Text color={"gray.500"} noOfLines={3} mx={1}>
Find {item.title ?? "this artwork"} at{" "}
{item.source ?? item.edmIsShownAt}
</Text>
</Stack>
</Stack>
</Box>
</SimpleGrid>
))}
</>
);

Answer 1

You need to take the SimpleGrid out of the data.map. Otherwise you are rendering a SimpleGrid for each record:
This is a quick test I run (forced the data to have something) ==>
import * as React from "react";
import {
Box,
SimpleGrid,
Stack,
Heading,
Text,
Avatar
} from "#chakra-ui/react";
export default function Example() {
const data: any = [
{ id: 1, title: "title1" },
{ id: 2, title: "title2" },
{ id: 3, title: "title3" }
];
return (
<>
<SimpleGrid columns={3} minChildWidth="30%" py={6} ml={10}>
{data.map((item: any, index: number) => {
return (
<Box
maxW={"445px"}
w={"full"}
boxShadow={"2xl"}
rounded={"md"}
p={6}
overflow={"hidden"}
>
<Box
h={"310px"}
bg={"gray.100"}
mt={-6}
mx={-6}
mb={6}
pos={"relative"}
>
<div
style={{
height: 310,
width: 445,
backgroundImage: "",
backgroundSize: "cover",
backgroundPosition: "middle"
}}
></div>
</Box>
<Stack>
<Text
color={"green.500"}
textTransform={"uppercase"}
fontWeight={800}
fontSize={"sm"}
letterSpacing={1.1}
>
{"Unknown Artist"} 2008
</Text>
<Heading fontSize={"2xl"} fontFamily={"body"}>
{item.title}
</Heading>
<Text color={"gray.500"} noOfLines={4}>
{item.dcDescription ?? item.dcDescriptionLangAware}
</Text>
</Stack>
<Stack mt={6} direction={"row"} spacing={4} align={"center"}>
<Avatar
src={item.edmPreview ?? item.edmIsShownBy}
alt={"Author"}
/>
<Stack direction={"column"} spacing={0} fontSize={"sm"}>
<Text fontWeight={600}>
{item.dataProvider}, {item.country}
</Text>
<Text color={"gray.500"} noOfLines={3} mx={1}>
Find {item.title ?? "this artwork"} at{" "}
{item.source ?? item.edmIsShownAt}
</Text>
</Stack>
</Stack>
</Box>
);
})}
</SimpleGrid>
</>
);
}