grid

As many equal columns as fit, collapsing to one on phones. Optional equal heights.

Example

A B

Laravel

<x-admin::stack gap="3">
    <x-admin::toolbar><x-admin::button size="sm">One</x-admin::button><x-admin::separator vertical /><x-admin::button size="sm">Two</x-admin::button></x-admin::toolbar>
    <x-admin::separator />
    <x-admin::grid min="8rem" gap="2"><x-admin::badge>A</x-admin::badge><x-admin::badge>B</x-admin::badge></x-admin::grid>
</x-admin::stack>

Props

PropRequiredDefaultOptions
min"16rem"
gap"4"
equalfalse
maxnull

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Grid } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<div class="adm-stack" style="gap:var(--ad-space-3)"><div class="adm-toolbar" role="toolbar"><button type="button" class="adm-btn adm-btn--secondary adm-btn--sm" >One</button>
<div class="adm-separator adm-separator--vertical" role="separator"  aria-orientation="vertical" ></div>
<button type="button" class="adm-btn adm-btn--secondary adm-btn--sm" >Two</button></div>
    <div class="adm-separator" role="separator" ></div>
    <div style="--_min:8rem;--_gap:var(--ad-space-2);gap:var(--_gap)" class="adm-grid"><span class="adm-badge adm-badge--neutral">A</span>
<span class="adm-badge adm-badge--neutral">B</span></div></div>