Components

Grid

An equal-column, responsive grid for page regions and widget layouts, with a cell component (Grid.Item).

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { Grid } from '@bigbang/ui';
Source: Grid.tsx
Storybook: Grid · Playground

Grid is in the @bigbang/ui package. Installation and style files are the same as for Button; for details, see the Button code tab.

import { Grid } from '@bigbang/ui';

<Grid columns={{ base: 1, md: 2, lg: 3 }} gap="lg">
  <Grid.Item>First item</Grid.Item>
  <Grid.Item span={{ base: 'full', md: 1 }}>Second item</Grid.Item>
</Grid>;

Props

columns

Description: Number of equal columns, or one count per breakpoint: base below 1024 px, md from 1024 px, lg from 1440 px, such as { base: 1, md: 2, lg: 3 }. A breakpoint without a value keeps the smaller one.
Type: Responsive<GridColumns>
Default: 1

gap

Description: Space between columns and rows, from the space.* scale.
Type: SpaceToken
Default: 'lg'

render

Description: Renders another element, such as <ul> or <section>. Defaults to a <div>.
Type: ReactElement | ComponentRenderFn<HTMLProps, {}>

className

Description: For layout only: width, margins, placement in a parent grid.
Type: string

children

Description: Grid items, usually Grid.Item.
Type: ReactNode

The props of Grid.Item are span, render and className; the table above shows those of Grid. Native <div> attributes are passed through. ref is attached to the rendered element.

Data attributes

data-component="grid": on the Grid root element.
data-part="item": on Grid.Item.