0

我关于stackoverflow的第一个问题，所以如果我在提出这个问题时犯了任何错误，请在下面评论。我使用的技术栈由 node-scss、reactv16.3 和 typescriptv3.7 组成。我正在制作我的网站主页，当前状态如下图所示： 点击此处查看图片

我想要做的是将最后一行中的元素（当元素尚未覆盖该行时）对齐到中心。我当前用于橙色渐变框（每个橙色框都是模式链接）的 jsx（因为我正在使用 react）是：

import * as React from "react";
import { Link } from "react-router-dom";
import "./modeGallery.scss";
import toUrl from "../../../util/toUrl";

export interface ModeLinkProps {
  modeName: string;
  mainUINameOnModeClick: string;
}

const ModeLink: React.SFC<ModeLinkProps> = ({
  modeName,
  mainUINameOnModeClick: screenNameOnModeClick,
}) => {
  const url = `${modeName}/${screenNameOnModeClick}`;

  return (
    <Link to={toUrl(url)}>
      <h3>{modeName}</h3>
    </Link>
  );
};

const ModeGallery: React.FC = () => {
  return (
    <section className="gallery">
      <ModeLink modeName="VS AI" mainUINameOnModeClick="customize" />
      <ModeLink modeName="Campaign" mainUINameOnModeClick="play" />
      <ModeLink modeName="Campaign" mainUINameOnModeClick="play" />
      <ModeLink modeName="Campaign" mainUINameOnModeClick="play" />
      <ModeLink modeName="Campaign" mainUINameOnModeClick="play" />
      <ModeLink modeName="Campaign" mainUINameOnModeClick="play" />
    </section>
  );
};

export default ModeGallery;

请注意，如果我需要的比我现在需要的多，我只有这么多相等的框来测试布局系统是否可以工作。因此，删除这些框不是解决方案。我的这个组件的 scss 是：

@import "../base-variables/baseScreenSizes";
@import "../base-mixins/gradients";

$boxWidth: calc(180px + 5vw);
$boxShadowOffset: 10px;

section.gallery {
  display: grid;

  padding: 2em;
  color: white;

  grid-template-columns: repeat(auto-fill, minmax($boxWidth, 1fr));
  grid-auto-rows: calc(10rem + 5vw);

  column-gap: 5rem;
  row-gap: 2rem;

  justify-content: space-around;

  > a {
    padding: 0.8em;
    border-radius: 20px;
    box-shadow: -$boxShadowOffset $boxShadowOffset 16px red;

    @include animatedLinearGradient($orangeCoralGradient, 3s);

    h3 {
      font-family: cursive;
      font-size: 1.35rem;

      margin-top: 0;
    }
  }
}

我在这里使用网格系统，因为它提供了惊人的响应性，因此更改为 flexbox 之类的东西也不是一种选择。

被提议为可能重复的答案对我不起作用，因为它只提供了一个使用 css 网格的解决方案，并且该解决方案对我不起作用。

那么我该怎么做才能将最后一行中的元素对齐到中心（同时保持它们之间的间隙）？

4

0 回答 0