Grid container with a few nice presets to space the content and allow
scrolling to be added easily. The gr.cols-fit and gr.cols-fill macros
are convenience shortcuts for a useful grid css trick and are documented in the
Macros page.
<ws-flex>
<ws-titlebar>
<span ws-x="[$title] [$title-text]">
Row Direction (default)
</span>
</ws-titlebar>
<ws-grid ws-x="[gr.cols 1fr 1fr 1fr]">
<ws-chip ws-x="[$outline] [$color @primary]">
Item 1
</ws-chip>
<ws-chip ws-x="[$outline] [$color @primary]">
Item 2
</ws-chip>
<ws-chip ws-x="[$outline] [$color @primary]">
Item 3
</ws-chip>
<ws-chip ws-x="[$outline] [$color @primary]">
Item 4
</ws-chip>
</ws-grid>
<ws-titlebar>
<span ws-x="[$title] [$title-text]">
Column Direction
</span>
</ws-titlebar>
<ws-grid ws-x="[gr.flow column] [gr.rows 1fr 1fr] [gr.cols 1fr 1fr]">
<ws-chip ws-x="[$outline] [$color @primary]">
Item 1
</ws-chip>
<ws-chip ws-x="[$outline] [$color @primary]">
Item 2
</ws-chip>
<ws-chip ws-x="[$outline] [$color @primary]">
Item 3
</ws-chip>
<ws-chip ws-x="[$outline] [$color @primary]">
Item 4
</ws-chip>
</ws-grid>
<ws-titlebar>
<div ws-x="[$title]">
<span ws-x="[$title-text]">
Auto-fit and Auto-fill macros
</span>
<span ws-x="[$subtitle-text]">
Resize the window to see effects
</span>
</div>
</ws-titlebar>
<ws-grid ws-x="[gr.cols-fit 80px, 1fr]">
<div ws-x="[flex] [fl-center]">auto-fit</div>
<button ws-x="[$outline]">Button</button>
<button ws-x="[$outline]">Button</button>
<button ws-x="[$outline]">Button</button>
<button ws-x="[$outline]">Button</button>
<button ws-x="[$outline]">Button</button>
</ws-grid>
<ws-grid ws-x="[gr.cols-fill 80px, 1fr]">
<div ws-x="[flex] [fl-center]">auto-fill</div>
<button ws-x="[$outline]">Button</button>
<button ws-x="[$outline]">Button</button>
<button ws-x="[$outline]">Button</button>
<button ws-x="[$outline]">Button</button>
<button ws-x="[$outline]">Button</button>
</ws-grid>
</ws-flex>