ColumnsResponsive

Lay our children in columns, on a 12 point grid system that is responsive to screen size.

@solara.component
def ColumnsResponsive(
    default=None,
    small=None,
    medium=None,
    large=None,
    xlarge=None,
    children=[],
    wrap=True,
    gutters=True,
    gutters_dense=False,
    classes: List[str] = [],
    style: Union[str, Dict[str, str], None] = None,
):

    ...

If a single number is specified, or less values than children, the values will be cycled. The total width of this system is 12, so if you want to have 3 columns, each taking up 4 points, you would specify [4, 4, 4] or 4.

with ColumnsResponsive([4, 4, 4]):
    ...
with ColumnsResponsive(4):  # same effect
    ...

If you want the first column to take up 4 points, and the second column to take up the remaining 8 points, you would specify [4, 8].

with ColumnsResponsive([4, 8]):
    ...

If you want your columns to be full width on large screen, and next to each other on larger screens.

with ColumnsResponsive(12, large=[4, 8]):
    ...

Arguments

• default: Width of column for >= 0 px.
• small: Width of column for >= 600 px.
• medium: Width of column >= 960 px.
• large: Width of column for >= 1264 px.
• xlarge: Width of column for >= 1904 px.