Recipes
/
Content
/
Multi-column-row
A simple responsive multi-column and row layout. We specify the number of columns/rows to the flex_direction property as a list. The layout will automatically adjust the number of columns/rows based on the screen size.
For details, see the responsive docs page.
rx.flex(
rx.box(
bg=rx.color("accent", 3),
width="100%",
height="100%",
),
rx.box(
bg=rx.color("accent", 5),
width="100%",
height="100%",
),
rx.box(
bg=rx.color("accent", 7),
width="100%",
height="100%",
),
bg=rx.color("accent", 10),
spacing="4",
padding="1em",
flex_direction=["column", "column", "row"],
height="600px",
width="100%",
)rx.flex(
rx.box(
bg=rx.color("accent", 3),
width="100%",
height="100%",
),
rx.box(
bg=rx.color("accent", 5),
width=["100%", "100%", "50%"],
height=["50%", "50%", "100%"],
),
rx.box(
bg=rx.color("accent", 7),
width="100%",
height="100%",
),
rx.box(
bg=rx.color("accent", 9),
width=["100%", "100%", "50%"],
height=["50%", "50%", "100%"],
),
bg=rx.color("accent", 10),
spacing="4",
padding="1em",
flex_direction=["column", "column", "row"],
height="600px",
width="100%",
)rx.flex(
rx.flex(
rx.box(
bg=rx.color("accent", 3),
width=["100%", "100%", "50%"],
height="100%",
),
rx.box(
bg=rx.color("accent", 5),
width=["100%", "100%", "50%"],
height="100%",
),
width="100%",
height="100%",
spacing="4",
flex_direction=["column", "column", "row"],
),
rx.box(
bg=rx.color("accent", 7), width="100%", height="50%"
),
rx.box(
bg=rx.color("accent", 9), width="100%", height="50%"
),
bg=rx.color("accent", 10),
spacing="4",
padding="1em",
flex_direction="column",
height="600px",
width="100%",
)Did you find this useful?
No
Yes
