Grid
Columns that fit the screen: as many as fit a minimum width, or a fixed number that folds on phones.
Demo
A 160px minimum: as many columns as fit.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Three columns: two under 900px, one under 560px.
Column 1
Column 2
Column 3
Get it
It needs theme.qwe, as every component does; or take the whole kit, quillo-ui.qwe. Each component brings its own styles to the pages that show it.
$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/grid.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/grid.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/grid.qwe
view GridDemoCell(label: str) = <div style="padding: 18px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-subtle); text-align: center; font-size: 13px">{label}</div>view GridDemo() = <div.demo-stack> <p.demo-note>A 160px minimum: as many columns as fit.</p> <Grid min={160} gap="sm">{for i in range(1, 7) => <GridDemoCell label={`Item ${i}`}/>}</Grid> <p.demo-note>Three columns: two under 900px, one under 560px.</p> <Grid columns={3}>{for i in range(1, 4) => <GridDemoCell label={`Column ${i}`}/>}</Grid> </div>Source
ui/grid.qwe
// Grid: lays its children out in columns that fit the screen.//// <Grid min={240}> {for p in products => <Card title={p.name}>...</Card>} </Grid>// <Grid columns={3} gap="lg"> ... </Grid>//// min: the narrowest a column may be, in pixels (220, the default): as many// columns as fit, and one on a phone. columns: a fixed number instead; three or// more become two under 900px, and every grid is one column under 560px.// gap: pixels (16, the default) or "none", "xs" (4), "sm" (8), "md" (16), "lg" (24), "xl" (32).import ui/theme.qwe use ui_clslet grid_css = css`.ui-grid { display: grid; gap: var(--ui-grid-gap, 16px); grid-template-columns: repeat(auto-fill, minmax(min(var(--ui-grid-min, 220px), 100%), 1fr));}.ui-grid > * { min-width: 0; }.ui-grid-cols { grid-template-columns: repeat(var(--ui-grid-cols), minmax(0, 1fr)); }@media (max-width: 899px) { .ui-grid-many { grid-template-columns: repeat(2, minmax(0, 1fr)); } }@media (max-width: 559px) { .ui-grid-cols { grid-template-columns: minmax(0, 1fr); } }`fn grid_gap(gap) = match gap { int as n => `${n}px` float as n => `${n}px` "none" => "0" "xs" => "4px" "sm" => "8px" "lg" => "24px" "xl" => "32px" _ => "16px" }view Grid(columns: int? = null, min: int = 220, gap = 16, class: str? = null, children) { style global grid_css <div class={ui_cls(["ui-grid", columns != null && "ui-grid-cols", columns != null && columns > 2 && "ui-grid-many", class])} style={columns != null ? `--ui-grid-cols: ${columns}; --ui-grid-gap: ${grid_gap(gap)}` : `--ui-grid-min: ${min}px; --ui-grid-gap: ${grid_gap(gap)}`}> {children} </div>}Related
BentoGridA grid of tiles spanning columns and rows, with titles, tints and links, packed to leave no holes.9 views · 6 downloadsColumnsChildren side by side, equal or weighted, that go one under another when their box is narrow.7 views · 9 downloadsMasonryCards of different heights packed into columns, each filled from the top, on CSS columns alone.6 views · 7 downloadsSwitcherChildren side by side until the row would be too narrow, then each on its own line, with no in-between.6 views · 6 downloadsActionBarA page's main action and a line about it, fixed to the bottom of the screen on a phone.13 views · 6 downloadsAppShellAn app's frame: a sidebar of links, a top bar and the page; the sidebar is a drawer on phones.10 views · 7 downloads
Thread
Thread 0 posts
On Grid: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.