Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add grid

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

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.

Basic Usage

1
2
3
<x-aura::grid :cols="3">
    <div class="rounded border border-aura-surface-200 p-3 text-center text-sm">1</div>
    <div class="rounded border border-aura-surface-200 p-3 text-center text-sm">2</div>
    <div class="rounded border border-aura-surface-200 p-3 text-center text-sm">3</div>
</x-aura::grid>
<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>

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.

Notes

cols maps to a fixed set of literal class strings rather than being interpolated. Tailwind generates CSS by scanning the source for class names it can read, and grid-cols-{{ $n }} is not one — a dynamic value produces no CSS at all. If you need a column count outside 1–6, pass your own grid classes instead.