@purpurds/grid

import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";

import * as GridStories from "./src/grid.stories"; import * as GridItemStories from "./src/grid.item.stories"; import packageInfo from "./package.json";

Grid

Version {packageInfo.version}

Showcase

Properties

Grid

Grid.Item

Installation

Via NPM

Add the dependency to your consumer app like "@purpurds/purpur": "^x.y.z"

Usage

The standard usage is to have multiple elements directly as children of the Grid component. It's also possible to only have one, to get the standard page padding, max width and prevent getting gaps between elements.

In MyApp.tsx

import "@purpurds/purpur/styles";

In MyComponent.tsx

Basic grid with same-width columns

import { Grid } from "@purpurds/purpur";

export const MyComponent = () => {
  return (
    <Grid colsSm={2} colsMd={4} colsLg={6}>
      <div>Grid item 1</div>
      <div>Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
      <div>Grid item 5</div>
      <div>Grid item 6</div>
    </Grid>
  );
};

Basic grid with noGap

import { Grid } from "@purpurds/purpur";

export const MyComponent = () => {
  return (
    <Grid noGap colsMd={3}>
      <div>Grid item 1</div>
      <div>Grid item 2</div>
      <div>Grid item 3</div>      
    </Grid>
  );
};

Besides noGap, noColGap and noRowGap are also available

Advanced grid using nested grids

import { Grid } from "@purpurds/purpur";

export const MyComponent = () => {
  return (
    <Grid>
      <Grid colsSm={1} colsMd={3} colsLg={3}>
        <div>Grid item 1</div>
        <div>Grid item 2</div>
        <div>Grid item 3</div>
      </Grid>
      <Grid colsSm={1} colsMd={2} colsLg={2}>
        <div>Grid item 4</div>
        <div>Grid item 5</div>
      </Grid>
      <Grid colsSm={1} colsMd={2} colsLg={2}>
        <div>Grid item 6</div>
        <div>Grid item 7</div>
      </Grid>
    </Grid>
  );
};

Advanced grid using Grid.Item

import { Grid } from "@purpurds/purpur";

export const MyComponent = () => {
  return (
    <Grid>
      <Grid.Item colSpanSm={2} colSpanMd={5} colSpanLg={3}>
        Grid item 1
      </Grid.Item>
      <Grid.Item colSpanSm={2} colSpanMd={3} colSpanLg={9}>
        Grid item 2
      </Grid.Item>
      <Grid.Item colSpanSm={4} colSpanMd={2} colSpanLg={6}>
        Grid item 3
      </Grid.Item>
      <Grid.Item colSpanSm={4} colSpanMd={6} colSpanLg={6}>
        Grid item 4
      </Grid.Item>
    </Grid>
  );
};