GridWrapper

Import from @falcon/ui-kit/dist/legacy, not @falcon/ui-kit.

GridWrapper renders a responsive CSS grid with shorthand props for column count, gap sizes, row and column gaps, and optional borders between items.

Primary

Code

<div style={{ margin: "0 auto", width: "fit-content" }}>
  <GridWrapper
    borderBetween="row"
    borderBetweenBreakpoints={{ xs: "column", sm: "row" }}
    columns={10}
    columnsBreakpoints={{ sm: 3, lg: 6, xl: 8 }}
    columnsGap={8}
    columnsGapBreakpoints={{ sm: 16, lg: 20, xl: 36 }}
    gap={20}
    gapBreakpoints={{ sm: 8, lg: 20, xl: 32 }}
    rowsGap={12}
    rowsGapBreakpoints={{ sm: 8, lg: 32, xl: 42 }}
  >
    {Array.from({ length: 31 }, (_, i) => i + 1).map((i) => (
      <FlexWrapper
        align="center"
        direction="column"
        gap={12}
        justify="center"
        key={i}
      >
        <Typography variant="h5">Text</Typography>
        <Typography color="alert">{i}</Typography>
      </FlexWrapper>
    ))}
  </GridWrapper>
</div>

API

GridWrapper

Name	Type/Description
borderBetween	"row" | "all" | "column" | undefined
borderBetweenBreakpoints	Partial<Record<Breakpoint, "row" | "all" | "column">> | undefined
columns	number | undefined
columnsBreakpoints	Partial<Record<Breakpoint, number>> | undefined
columnsGap	number | undefined
columnsGapBreakpoints	Partial<Record<Breakpoint, number>> | undefined
gap	number | undefined
gapBreakpoints	Partial<Record<Breakpoint, number>> | undefined
rowsGap	number | undefined
rowsGapBreakpoints	Partial<Record<Breakpoint, number>> | undefined