Laravel Grid Component
Free · MITResponsive column grid that collapses on small screens.
A Grid built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4.
Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are
contrast-tested against WCAG 2.1 AA/UI in CI, in both themes —
see what's covered.
Drop it in with a single Blade tag:
<x-aura::grid>
Installation
composer require bluestarsystem/aura-uiUsage
<x-aura::grid :cols="4" gap="lg">
@foreach ($metrics as $metric)
<x-aura::data-card :title="$metric->label" :value="$metric->value" />
@endforeach
</x-aura::grid>See the full API, props and live examples in the Grid documentation.
Overview
<x-aura::grid> lays children out in columns and reduces the count as the viewport narrows, so a four-column dashboard becomes two columns on a tablet and one on a phone without you writing the breakpoints.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
cols |
int |
3 |
Columns at the widest breakpoint: 1–6. |
gap |
string |
'md' |
none, sm, md, lg, xl. |
as |
string |
'div' |
Element to render. |
See more examples and every variant in the Grid documentation.