Grid

import { Grid } from "@lualtek/react-components";
 
export default () => {
  return (
    <Grid>
      <Grid.Item>1</Grid.Item>
      <Grid.Item>2</Grid.Item>
      <Grid.Item>3</Grid.Item>
    </Grid>
  );
};

export type GridProps = {
  /**
   * The children to be rendered in the grid.
   * Even though this component doesn't block you to use any elements as children,
   * it's recommended to use only `<Grid.Item>` component to generate the grid items.
   */
  children: ReactNode;
 
  /**
   * Specify how many columns the grid should have.
   */
  columns?: number;
 
  /**
   * Specify how many rows the grid should have.
   */
  rows?: number;
 
  /**
   * Add a gap between rows.
   */
  rowGap?: TokensTypes["space"];
 
  /**
   * Add a gap between columns.
   */
  columnGap?: TokensTypes["space"];
 
  /**
   * Set the columns repeating behaviour.
   * This refers to the CSS function `repeat()`, which can use both `auto-fit`
   * and `auto-fill` parameters.
   *
   * Read more: https://developer.mozilla.org/en-US/Web/CSS/repeat
   *
   * @default 'fill'
   */
  filling?: "fit" | "fill" | false;
 
  /**
   * Set the minimum columns width
   * @default '10rem'
   */
  colMinWidth?: string;
 
  /**
   * Set the minimum rows height
   * @default '1fr'
   */
  rowMinHeight?: string;
 
  /**
   * Set the horizontal padding (left/right)
   */
  hPadding?: TokensTypes["space"];
 
  /**
   * Set the vertical padding (top/bottom)
   */
  vPadding?: TokensTypes["space"];
};

export type GridItemProps = {
  /**
   * Make the item span the entire row.
   * @default false
   */
  fullWidth?: boolean;
 
  /**
   * Set the explicit offsets (start/end) of the item across the grid columns.
   * This props refers to the CSS `grid-column` property.
   *
   * Read more: https://developer.mozilla.org/en-US/Web/CSS/grid-column
   */
  column?: string;
 
  /**
   * Set the explicit offsets (start/end) of the item across the grid rows.
   * This props refers to the CSS `grid-row` property.
   *
   * Read more: https://developer.mozilla.org/en-US/Web/CSS/grid-row
   */
  row?: string;
};