Overview

<x-row> is a horizontal flex container (default align-items: center). <x-col> is vertical (default align-items: stretch).

Both observe spacing, gap, align, wrap, inline, fill, and padding shorthands. There is no <x-stack> — use these elements or the stack() directive.

x-row + x-col live demo

A header row, then a wrapping row of boxes inside a column — all via custom elements.

import { html, renderApp } from 'mates';
import { registerLayoutElements } from 'mates-ui';

registerLayoutElements();

const App = () => {
return () => html`
<div class="card card-body m-w-full">
<x-col spacing="2">
<x-row spacing="1" align="between center"
class="card card-body">
<strong>Logo</strong>
<x-row spacing="1">
<span>Docs</span>
<span>API</span>
</x-row>
</x-row>
<x-row wrap spacing="1">
${['Alpha', 'Beta', 'Gamma', 'Delta'].map(
(label) => html`
<x-box p="1.5" bgcolor="var(--m-surface)" br="var(--m-r)">
${label}
</x-box>
`,
)}
</x-row>
</x-col>
</div>
`;
};

renderApp(App, document.getElementById('app'));