Pikas UI

@pikas-ui/grid

This package contains a grid component that can be used to create a grid layout.

Change Log

Requirements

To use this package, you must install the @pikas-ui/styles package.

Installation

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/grid

yarn add @pikas-ui/grid

pnpm add @pikas-ui/grid

Usage

Grid

This component is used to create a grid layout. It can be used as a container or an item.

import { Grid } from '@pikas-ui/grid';

const Example: React.FC = () => {
  return (
    <Grid type="container" cols={{ default: 12 }}>
      <Grid type="item" cols={{ default: 12, xl: 6 }}>
        <Block>1</Block>
      </Grid>
      <Grid type="item" cols={{ default: 12, md: 6, xl: 3 }}>
        <Block>2</Block>
      </Grid>
      <Grid type="item" cols={{ default: 12, md: 6, xl: 3 }}>
        <Block>3</Block>
      </Grid>
      <Grid
        type="item"
        cols={{ default: 12, xl: 6 }}
        start={{ default: 1, xl: 7 }}
      >
        <Block>4</Block>
      </Grid>
    </Grid>
  );
};

Container

import { Grid } from '@pikas-ui/grid';

const Example: React.FC = () => {
  return <Grid type="container" />;
};

Props

Prop	Description	Type	Default
`children`	The children of the component.	`ReactNode`	-
`css`	The css of the component.	`PikasCSS`	-
`type`	The type of the component.	`GridType`	required
`rowGap`	The row gap of the component.	`GridContainerRowGap`	`"md"`
`columnGap`	The column gap of the component.	`GridContainerColumnGap`	`"md"`
`cols`	The number of columns of the component.	`GridContainerCols`	required
`direction`	The direction of the component.	`GridContainerDirection`	-
`justifyContent`	The justify content of the component.	`GridContainerJustifyContent`	-
`alignItems`	The align items of the component.	`GridContainerAlignItems`	-

Item

import { Grid } from '@pikas-ui/grid';

const Example: React.FC = () => {
  return <Grid type="type" />;
};

Props

Prop	Description	Type	Default
`children`	The children of the component.	`ReactNode`	-
`css`	The css of the component.	`PikasCSS`	-
`type`	The type of the component.	`GridType`	required
`cols`	Number of columns the item should span.	`GridItemCols`	-
`start`	The start of the column the item should span.	`GridItemStart`	-
`end`	The end of the column the item should span.	`GridItemEnd`	-
`order`	The order of the item.	`GridItemOrder`	-

Contributing

This documentation can be edited on GitHub here