@nawt/grid

A simple grid Styled Component that allows for easy setting of repeatable columns.

Install

# For NPM
npm install @nawt/grid

# For Yarn
yarn add @nawt/grid

# For PNPM
pnpm install @nawt/grid

API

<Grid />

The Grid component.

| Parameter | Default Value | Type | Description | | :----------- | :------------ | :------------------- | :---------------------------------------------------------------------------------------------------------------- | | columnWidth | n/a | string \| string[] | This will distribute column widths evenly across its immediate children eg. '200px' or ['50px', '100px', '150px'] | | columnLength | n/a | number \| number[] | This will distribute item widths automagically via the number of columns you set eg. 3 or [1, 2, 3] | | gap | 1em | string \| string[] | Defines the gap width. |

import { Grid, GridItem } from '@nawt/flex';

// With columnWidths
export const MyFlexGrid = () => {
  return (
    <Grid columnWidth={["120px", "210px", "240px"]}>
      <GridItem}>Column 1</GridItem>
      <GridItem}>Column 2</GridItem>
      <GridItem}>Column 3</GridItem>
    </Grid>
  );
};

//  With columnLengths
export const MyFlexGrid = () => {
  return (
    <Grid columnLength={[1, 2, 3]}>
      <GridItem>Column 1</GridItem>
      <GridItem>Column 2</GridItem>
      <GridItem>Column 3</GridItem>
    </Grid>
  );
};

//  With gap
export const MyFlexGrid = () => {
  return (
    <Grid gap="2em">
      <GridItem>Column 1</GridItem>
      <GridItem>Column 2</GridItem>
      <GridItem>Column 3</GridItem>
    </Grid>
  );
};

<GridItem />

As its name implies, this is the child component of the Grid component with several system props included. Typical usage is as follows

import { Grid, GridItem } from '@nawt/flex';

export const MyFlexGrid = () => {
  return (
    <Grid>
      <GridItem alignItems="center">Column 1</GridItem>
      <GridItem alignItems="center">Column 2</GridItem>
      <GridItem alignItems="center">Column 3</GridItem>
    </Grid>
  );
};