Grid

Flexible CSS grid layout component for organizing content into responsive multi column layouts.

Component Syntax

blade

<x-aura::grid cols="1" md="3" gap="4">

    <x-aura::card>
        Column 1
    </x-aura::card>

    <x-aura::card>
        Column 2
    </x-aura::card>

    <x-aura::card>
        Column 3
    </x-aura::card>

</x-aura::grid>

1. Responsive Three Column Grid

blade

Authentication

Secure sign in and session management.

Database

Automated migrations and model schemas.

API Gateway

Rate limiting and route throttling.

<x-aura::grid cols="1" md="3" gap="4">

    <x-aura::card>

        <x-aura::flex direction="col" gap="1">

            <x-aura::heading level="3" size="sm">
                Authentication
            </x-aura::heading>

            <x-aura::text variant="subtle" size="sm">
                Secure sign in and session management.
            </x-aura::text>

        </x-aura::flex>

    </x-aura::card>

    <x-aura::card>

        <x-aura::flex direction="col" gap="1">

            <x-aura::heading level="3" size="sm">
                Database
            </x-aura::heading>

            <x-aura::text variant="subtle" size="sm">
                Automated migrations and model schemas.
            </x-aura::text>

        </x-aura::flex>

    </x-aura::card>

    <x-aura::card>

        <x-aura::flex direction="col" gap="1">

            <x-aura::heading level="3" size="sm">
                API Gateway
            </x-aura::heading>

            <x-aura::text variant="subtle" size="sm">
                Rate limiting and route throttling.
            </x-aura::text>

        </x-aura::flex>

    </x-aura::card>

</x-aura::grid>

2. Two Column Form or Setting Layout

blade

First Name

Last Name

Email Address

Role

<x-aura::grid cols="1" sm="2" gap="4">

    <x-aura::field label="First Name">

        <x-aura::input placeholder="Alex" />

    </x-aura::field>

    <x-aura::field label="Last Name">

        <x-aura::input placeholder="Morgan" />

    </x-aura::field>

    <x-aura::field label="Email Address">

        <x-aura::input placeholder="alex@example.com" />

    </x-aura::field>

    <x-aura::field label="Role">

        <x-aura::input placeholder="Administrator" />

    </x-aura::field>

</x-aura::grid>

3. Four Column Metric Cards

blade

Total Users

24,520

Active Sessions

1,842

Revenue

$92,400

Uptime

99.98%

<x-aura::grid cols="1" sm="2" lg="4" gap="4">

    <x-aura::card>

        <x-aura::flex direction="col" gap="1">

            <x-aura::text variant="subtle" size="sm">
                Total Users
            </x-aura::text>

            <x-aura::heading level="2" size="md">
                24,520
            </x-aura::heading>

        </x-aura::flex>

    </x-aura::card>

    <x-aura::card>

        <x-aura::flex direction="col" gap="1">

            <x-aura::text variant="subtle" size="sm">
                Active Sessions
            </x-aura::text>

            <x-aura::heading level="2" size="md">
                1,842
            </x-aura::heading>

        </x-aura::flex>

    </x-aura::card>

    <x-aura::card>

        <x-aura::flex direction="col" gap="1">

            <x-aura::text variant="subtle" size="sm">
                Revenue
            </x-aura::text>

            <x-aura::heading level="2" size="md">
                $92,400
            </x-aura::heading>

        </x-aura::flex>

    </x-aura::card>

    <x-aura::card>

        <x-aura::flex direction="col" gap="1">

            <x-aura::text variant="subtle" size="sm">
                Uptime
            </x-aura::text>

            <x-aura::heading level="2" size="md">
                99.98%
            </x-aura::heading>

        </x-aura::flex>

    </x-aura::card>

</x-aura::grid>

Component Props

Available properties and configurations for the grid layout component.

Prop	Default	Available Values
cols	1	1 2 3 4 5 6 12 none
sm	null	1 2 3 4 6
md	null	1 2 3 4 6
lg	null	1 2 3 4 6 12
gap	null	1 2 3 4 6 8
inline	false	true false
as	div	div section article main

Aura Wire

Component Library

Grid

Component Syntax

1. Responsive Three Column Grid

Authentication

Database

API Gateway

2. Two Column Form or Setting Layout

3. Four Column Metric Cards

24,520

1,842

$92,400

99.98%

Component Props

Container

Flex

Aura Wire