#Columns

import Columns from "@poodle/ui/Columns";

The Columns component is a simple grid layout. It's aim for the easy to use and support responsive.

The component should be used together with Column component.

Columns do not follow any grid system like 12 columns or 16 columns. Instead, you can add many columns you want, as long as there is enough space.

Use gutter prop we can control space between columns. Also, they can accept responsive value.

We can use colWidth prop in Column component to change the column width. They can accept responsive value too.

If we have too many columns with specific width, and the space is limited, the content will be overflow. We can use wrapMode props to force the columns wrap to another row.

Use wrapGutter props to control horizontal spacing between columns.

Use prop collapse we can force the column collapse to a row in lower screen resolution.

collapse use the breakpoint system, so make sure you add them and pass the correct breakpoint value.

Please check theming component document here.

export type ColumnsStyleKeys = "root"

export interface ColumnsThemeConfig
  extends StandardThemeConfig<ColumnsStyleKeys, ColumnsProps> {}

export interface ColumnsProps
    extends BoxProps,
        StandardComponentProps,
        LocalColumnsProps {}