Laravel Bento Grid Component
Free · MITThe asymmetric grid behind a feature section — cells claim extra columns or rows and the layout stays even.
A Bento 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::bento-grid>
Installation
composer require bluestarsystem/aura-uiUsage
<x-aura::bento-grid :columns="3">
<x-aura::bento-cell :col-span="2">…</x-aura::bento-cell>
<x-aura::bento-cell>…</x-aura::bento-cell>
</x-aura::bento-grid>See the full API, props and live examples in the Bento Grid documentation.
Overview
<x-aura::bento-grid> lays out cells of different sizes without leaving holes. Each
bento-cell can claim more than one column or row.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns |
int |
3 |
1, 2, 3 or 4. Responsive: one column on small screens. |
gap |
string |
'md' |
sm, md, lg. |
as |
string |
'div' |
div, section, ul. |
See more examples and every variant in the Bento Grid documentation.