0

My first question on stackoverflow so if i make any mistake in making this question please comment down bellow. The tech stack i am using is comprised of node-scss, reactv16.3 and typescriptv3.7. I am making my website homepage which the current state is shown in the following image: click here to view the image

What i want to do is align the elements in the last row(when the elements dont cover the row already) to the center. My current jsx(as i am using react) for the orange gradient boxes(each orange box is a mode link) is:

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;

Please note that i only have so many equal boxes to test if the layout system would work if i needed more than the ones i need now. So delleting those boxes is not a solution. My scss for this component is:

@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;
    }
  }
}

I am using here the grid system because of the amazing responsivness it gives so changing to something like flexbox is also not an option.

The answer that has been proposed as a possible duplicate doesn't work for me as it only provides one solution using the css grid and that solution doesn't work for me.

So what can i do to align the elements in the last row to the center(while also keeping the gap between them)?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Mike
  • 1
  • 1
  • 1
  • Try changing `justify-content` to `center` and then adding margin to the links so that they are separated out. – sidthesloth Sep 03 '20 at 18:10
  • Does this answer your question? [How to center elements on the last row in CSS Grid?](https://stackoverflow.com/questions/46276793/how-to-center-elements-on-the-last-row-in-css-grid) – Henry Woody Sep 03 '20 at 18:52
  • @sidthesloth justify-content only works when the entire grid is smaller than the grid container which is not the case. But anyways thanks for the help:-) – Mike Sep 04 '20 at 10:56
  • @HenryWoody it doesnt answer my question because nearly alll answers are with flexbox and the remaining one doesn't work. – Mike Sep 04 '20 at 11:03
  • @Mike I think that's the idea, you need to change from grid to flex. I'm not certain that you can't do this with grid, but it seems like it wouldn't be possible since centering the last line might produce a non-grid alignment. You can sort of hack this by putting blank elements to fill the spaces (but then you lose responsive CSS handling). Anyway grid and flex can produce the same results if all your elements have the same dimensions. – Henry Woody Sep 04 '20 at 17:31
  • @Henry Woody The problem is that if i switch to flexbox i will have to do tons of media queries(flex-wrap isn't enough) to substitute this amazing powerfull line of css grid: `grid-template-columns: repeat(auto-fill, minmax($boxWidth, 1fr))`; Btw do you know if subrgrid will simplify this behavior? – Mike Sep 04 '20 at 18:28
  • Just looked into it and I doubt it (though I'm not super familiar with subgrid). Seems you would need to adjust the HTML to make that work and that'll be hard to make responsive. I think your best bet would be to switch to flex and set up a few media queries to set the element widths or just accept the grid alignment :) – Henry Woody Sep 04 '20 at 19:28
  • Ok. Thanks for your opinion! I ams also considering a javascript approach to selecte the elements on the last row and then center them. What do you think? – Mike Sep 05 '20 at 20:02

0 Answers0