如何让这个链接到 Json 文件的 js 卡水平移动？

如何解决如何让这个链接到 Json 文件的 js 卡水平移动？

目前，每当我在 JSON 文件中添加新选项时，它都会直接向下。我怎样才能到达下一张卡片右边的位置？我在其他事情上也遇到了这个问题。我添加了一个 direction="row" 但它仍然没有做任何事情。有什么建议么？感谢您的帮助，谢谢。

import React,{ Component } from "react";
import "./Style/Home.css";
import "../fonts/fonts.css";
import {
  Box,Button,Form,FormField,TextInput,Header,heading,Paragraph,TextArea,Card,CardHeader,CardBody,CardFooter,Avatar,Image,grommet,} from "grommet";
import { MainFooter } from "../Footer/Footer";
import { Currency,Organization,Trophy,Announce } from "grommet-icons";
import { custom } from "grommet/themes";
import "./Style/AlumniStory.css";
import StoryList from "../../data/Story.json";

export class Alumnistory extends Component {
  render() {
    return (
      <grommet theme={custom}>
        <Box>
          <Box direction="column" gap="50px">
            <Header className="Log-in-header">
              <h2>Alumni's Stories</h2>
            </Header>

            <Box></Box>

            <Box>
              <heading
                className="Winner-Header"
                alignSelf="center"
                textAlign="center"
              >
                Alumni's Story
              </heading>
            </Box>

            <Box>
              <Box direction="row-responsive">
                {/* <Avatar size="xlarge" background="accent-4"> */}
                <Box>
                  {StoryList.map((storydetail,index) => {
                    return (
                      <Box>
                        <Card width="auto" height="auto">
                          <Box direction="column">
                            <CardHeader background="none">
                              <Box direction="row-responsive">
                                <Box alignSelf="start">
                                  <heading size="small" color="black">
                                    {storydetail.name}
                                  </heading>
                                </Box>
                                <Box>
                                  <Avatar background="accent-4">
                                    <Image
                                      fill
                                      alignSelf="center"
                                      src={storydetail.images}
                                      fit="cover"
                                    />
                                  </Avatar>
                                </Box>
                                <Box
                                  direction="row-responsive"
                                  gap="small"
                                  alignSelf="center"
                                  className="Card3Header"
                                >
                                  <Box>
                                    <Paragraph color="black" size="xlarge">
                                      Graduated Year of
                                    </Paragraph>
                                  </Box>
                                  <Box>
                                    <Paragraph color="black" size="xlarge">
                                      {storydetail.year}
                                    </Paragraph>
                                  </Box>
                                </Box>
                              </Box>
                            </CardHeader>
                            <CardBody>
                              <Box direction="column">
                                <Box alignSelf="center">
                                  <strong>{storydetail.title}</strong>
                                </Box>
                                <Box alignSelf="center">
                                  <Paragraph>{storydetail.story}</Paragraph>
                                </Box>
                              </Box>
                            </CardBody>
                          </Box>
                        </Card>
                      </Box>
                    );
                  })}
                </Box>
              </Box>
            </Box>
          </Box>
        </Box>
      </grommet>
    );
  }
}

export default Alumnistory;