Javascript 如何使链接到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;

import React，{Component}来自“React”；
导入“/Style/Home.css”；
导入“./fonts/fonts.css”；
进口{
盒子，
按钮
形式，
福尔菲尔德，
文本输入，
标题，
标题
段落
文本区，
卡片
万向节，
名片夹，
卡片页脚，
阿凡达
形象,，
索环，
}从“索环”；
从“./Footer/Footer”导入{MainFooter}；
从“索环图标”导入{货币、组织、奖杯、公告}；
从“套圈/主题”导入{custom}；
导入“/Style/AlumniStory.css”；
从“../../data/Story.json”导入故事列表；
导出类AlumnHistory扩展组件{
render（）{
返回(
校友的故事
校友的故事
{/*  */}
{StoryList.map（（故事细节，索引）=>{
返回(
{storydeail.name}
毕业年份
{storydeail.year}
{storydeail.title}
{storydeail.story}
);
})}
);
}
}
导出默认校友历史记录；

在这种形式下，不可能看到发生了什么。这听起来更像是CSS样式问题，而不是React.js问题。但是，如果您可以制作一个可运行的代码片段，让我们体验您的代码，那么就更容易提供帮助。