layout

import%20marimo%0A%0A__generated_with%20%3D%20%220.10.19%22%0Aapp%20%3D%20marimo.App()%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%23%20Stacks%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22Use%20%60mo.hstack%60%20and%20%60mo.vstack%60%20to%20layout%20outputs%20in%20rows%20and%20columns.%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20align%20%3D%20mo.ui.dropdown(%0A%20%20%20%20%20%20%20%20label%3D%22Align%22%2C%20options%3D%5B%22start%22%2C%20%22end%22%2C%20%22center%22%2C%20%22stretch%22%5D%0A%20%20%20%20)%0A%20%20%20%20justify%20%3D%20mo.ui.dropdown(%0A%20%20%20%20%20%20%20%20label%3D%22Justify%22%2C%0A%20%20%20%20%20%20%20%20options%3D%5B%22start%22%2C%20%22center%22%2C%20%22end%22%2C%20%22space-between%22%2C%20%22space-around%22%5D%2C%0A%20%20%20%20)%0A%20%20%20%20gap%20%3D%20mo.ui.number(label%3D%22Gap%22%2C%20start%3D0%2C%20stop%3D100%2C%20value%3D1)%0A%20%20%20%20size%20%3D%20mo.ui.slider(label%3D%22Size%22%2C%20start%3D60%2C%20stop%3D500)%0A%20%20%20%20wrap%20%3D%20mo.ui.checkbox(label%3D%22Wrap%22)%0A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20f%22%22%22%0A%20%20%20%20%20%20%20%20**Stack%20parameters**%0A%0A%20%20%20%20%20%20%20%20%7Bmo.hstack(%5Balign%2C%20justify%2C%20gap%2C%20wrap%5D%2C%20gap%3D0.25)%7D%0A%0A%20%20%20%20%20%20%20%20**Boxes%20%7Bsize%7D**%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%20align%2C%20gap%2C%20justify%2C%20size%2C%20wrap%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%23%23%20Horizontal%20Stack%3A%20%60hstack%60%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(align%2C%20boxes%2C%20gap%2C%20justify%2C%20mo%2C%20wrap)%3A%0A%20%20%20%20mo.hstack(%0A%20%20%20%20%20%20%20%20boxes%2C%0A%20%20%20%20%20%20%20%20align%3Dalign.value%2C%0A%20%20%20%20%20%20%20%20justify%3Djustify.value%2C%0A%20%20%20%20%20%20%20%20gap%3Dgap.value%2C%0A%20%20%20%20%20%20%20%20wrap%3Dwrap.value%2C%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%23%23%20Vertical%20Stack%3A%20%60vstack%60%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(align%2C%20boxes%2C%20gap%2C%20mo)%3A%0A%20%20%20%20mo.vstack(%0A%20%20%20%20%20%20%20%20boxes%2C%0A%20%20%20%20%20%20%20%20align%3Dalign.value%2C%0A%20%20%20%20%20%20%20%20gap%3Dgap.value%2C%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo%2C%20size)%3A%0A%20%20%20%20def%20create_box(num)%3A%0A%20%20%20%20%20%20%20%20box_size%20%3D%20size.value%20%2B%20num%20*%2010%0A%20%20%20%20%20%20%20%20return%20mo.Html(%0A%20%20%20%20%20%20%20%20%20%20%20%20f%22%3Cdiv%20style%3D'min-width%3A%20%7Bbox_size%7Dpx%3B%20min-height%3A%20%7Bbox_size%7Dpx%3B%20background-color%3A%20orange%3B%20text-align%3A%20center%3B%20line-height%3A%20%7Bbox_size%7Dpx'%3E%7Bstr(num)%7D%3C%2Fdiv%3E%22%0A%20%20%20%20%20%20%20%20)%0A%0A%0A%20%20%20%20boxes%20%3D%20%5Bcreate_box(i)%20for%20i%20in%20range(1%2C%205)%5D%0A%20%20%20%20return%20boxes%2C%20create_box%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20import%20marimo%20as%20mo%0A%20%20%20%20return%20(mo%2C)%0A%0A%0Aif%20__name__%20%3D%3D%20%22__main__%22%3A%0A%20%20%20%20app.run()%0A