GridWrapper

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

Code

import {
  FlexWrapper,
  GridWrapper,
  Typography,
} from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <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

Props

borderBetween

borderBetween?: "all" | "row" | "column"

borderBetweenBreakpoints

borderBetweenBreakpoints?: Partial<Record<Breakpoint, "all" | "row" | "column">>

columns

columns?: number

columnsBreakpoints

columnsBreakpoints?: Partial<Record<Breakpoint, number>>

columnsGap

columnsGap?: number

columnsGapBreakpoints

columnsGapBreakpoints?: Partial<Record<Breakpoint, number>>

gap

gap?: number

gapBreakpoints

gapBreakpoints?: Partial<Record<Breakpoint, number>>

rowsGap

rowsGap?: number

rowsGapBreakpoints

rowsGapBreakpoints?: Partial<Record<Breakpoint, number>>