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

Question

目前，每当我使用 JSON 文件添加一个新选项时，它都会直接下降。我怎样才能到达下一张卡片向右的位置？我在其他事情上也遇到了这个问题。我添加了一个方向 =“行”，但它仍然没有做任何事情。有什么建议么？任何帮助表示赞赏，谢谢。

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;