Grid

The Grid component is a responsive grid layout that supports up to six columns. It allows for custom styling and flexible child component rendering.

Preview

Usage

import { Grid } from 'components/lib';

function MyComponent({ ...props }){
  return (
    <Grid max={ 4 }>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
    </Grid>
  );
}

Props

Prop	Description	Required	Value
children	the children to render	required	component(s)
className	custom styles	optional	SCSS or Tailwind style
max	maximum number of columns	required	integer (2-8) default: 2

Notes

• The children prop allows for flexible rendering of child components within the grid.

• The max prop specifies the maximum number of columns the grid can have