I'm currently working on rendering a card and organizing each card in rows of three, with the added flexibility of altering this number responsively.
I'm struggling to identify which parts of the code are conflicting with SimpleGrid, and have experimented with using Grid and Flex. Additionally, I don't have any CSS implemented at the moment.
Below is the snippet of code that I am trying to render:
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{" "}
<a href="url">{item.source ?? item.edmIsShownAt}</a>
</Text>
</Stack>
</Stack>
</Box>
</SimpleGrid>
))}
</>
);