Masonry

import { Masonry } from "@lualtek/react-components";
 
export default () => {
  return (
    <Masonry
      gap={8}
      columns={{
        default: 4,
        small: 1,
      }}
    >
      ...
    </Masonry>
  );
};

export type MasonryProps = {
  /**
   * Set the space between items. This is applied on both vertical
   * and horizontal axis.
   */
  gap?: TokensTypes["space"];
 
  /**
   * Set the breakpoints for the masonry layout. You can pass a fixed number
   * or an object map.
   *
   * The object map is used to change the number of the columns based on
   * the specified breakpoint. When passing an object, you must specify the
   * default key, other breakpoints are optional.
   *
   * @example
   *{
   *  default: 6,
   *  extraLarge: 5,
   *  large: 4,
   *  medium: 3,
   *  small: 2,
   *  extraSmall: 1
   *}
   */
  columns?: number | Columns;
};