Mis-alignment of last box when wrapped into a single column

Wrapping Box children, causes last child to be mis-aligned when the page shrinks so they wrap into a single column. Continuing to shrink the window causes the alignment to be corrected, (I think the correction occurs at the small breakpoint).

Expected Behavior

Shrinking a page so that all wrapped children are in a single column, should leave all children properly aligned.

Actual Behavior

The last child in a column appears to be mis-aligned. Evidently, the previous children are center-aligned around the “child + gap”. The last child is center-aligned for the “child” only. Because the previous children include the “gap”, the alignment of the last child is out of place.

URL, screen shot, or Codepen exhibiting the issue

https://codesandbox.io/s/grommet-box-wrap-alignment-t7y8d?file=/src/App.js

Steps to Reproduce

import React from "react";
import { Box, Card, Grommet, grommet, Heading, Paragraph } from "grommet";
import { hpe } from "grommet-theme-hpe";

const theme = hpe;
const cardWidth = "medium"; // medium or large (small cards do not wrap for some reason)
const cardHeight = "small"; // small, medium or large

export default function App() {
  return (
    <Grommet theme={theme}>
      <Heading>Wrap Alignment</Heading>
      <Paragraph margin="small">
        <b>Instructions</b>: Shrink window width until all three cards are in a
        column. Notice that the alignment of the last card is offset by the "gap
        width".
        <br />
        <br />
        <i>
          NOTE 1: This problem only shows up with "medium" and "large" cards.
          Small sized cards do not wrap for some reason.
        </i><br /><br />
        NOTE 2: Alignment is corrected as screen width reaches the small breakpoint.
      </Paragraph>
      {/* wrap allows one-card at a time to wrap to next row */}
      <Box align="center">
        <Box direction="row-responsive" gap="medium" justify="center" wrap>
          <Card
            border
            width={cardWidth}
            height={cardHeight}
            margin={{ bottom: "small" }} // for wrapped cards
          ></Card>
          <Card
            border
            width={cardWidth}
            height={cardHeight}
            margin={{ bottom: "small" }} // for wrapped cards
          />
          <Card
            border
            width={cardWidth}
            height={cardHeight}
            margin={{ bottom: "small" }} // for wrapped cards
          />
        </Box>
      </Box>
    </Grommet>
  );
}

Your Environment

• Grommet version: v2.15.2 (tested with both grommet-theme-hpe and grommet)
• Browser Name and version: Chrome
• Operating System and version (desktop or mobile): Windows

[LiveFreeAndRoam]

Excellent, thank you Eric. That fixed it. Mind the gap 😄.

In my case, previously, I used gap="small" in the containing Box. I removed that and to the contained Cards I added margin={{ right: 'small' }} and all Cards line up.

[LiveFreeAndRoam]

Yes, this one can be closed.

Cheers, Matt.

On Wed, 21 Oct 2020, 1:51 pm Shimi, [e-mail] wrote:

Great energy on this thread 😄

@LiveFreeAndRoam https://github.com/LiveFreeAndRoam Are we good with closing this issue, or is there anything else we can help with?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/grommet/grommet/issues/4631#issuecomment-713280730, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB6ZRGE4Q3RLJC3OGZRMK2DSLZLC7ANCNFSM4SXB5LFQ .