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: Optional[str] = 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 eachother on larger screens.
with ColumnsResponsive(12, large=[4, 8]): ...
- 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.
Current screensize is xsmall/default, each child is 6 points wide
Current screensize is small, each child is 4 points wide
Current screensize is medium, each child is 3 points wide
Current screensize is large, each child is 2 points wide
Current screensize is xlarge, each child is 1 points wide
Change the screen size to see the effect of the different columns sizes.