Chakra Card component is mapping vertically rather than horizontally

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{" "}
                  <a href="url">{item.source ?? item.edmIsShownAt}</a>
                </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{" "}
                    <a href="url">{item.source ?? item.edmIsShownAt}</a>
                  </Text>
                </Stack>
              </Stack>
            </Box>
          );
        })}
      </SimpleGrid>
    </>
  );
}