css – Chakra Card component is mapping vertically rather than horizontally


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. Thanks to all those that reply in advance, much appreciated.

 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>
      ))}
    </>
  );



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here