@nawt/grid v0.1.4

@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.

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