Neura UI

Composable Laravel UI
By Neura UI
Back to Home

Grid

Responsive grid component for creating flexible layouts with configurable columns and gaps

Basic Usage

The most basic grid with one column:
Item 1
Item 2
Item 3 
<neura::grid cols="1">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</neura::grid>

Column Layouts

Create grids with different numbers of columns (responsive by default):

2 Columns

Item 1
Item 2
Item 3
Item 4

3 Columns

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

4 Columns

Item 1
Item 2
Item 3
Item 4

6 Columns

1
2
3
4
5
6
<neura::grid cols="2">...</neura::grid>
<neura::grid cols="3">...</neura::grid>
<neura::grid cols="4">...</neura::grid>
<neura::grid cols="6">...</neura::grid>

Non-Responsive Grid

Disable responsive behavior with responsive="false":
Item 1
Item 2
Item 3
<neura::grid cols="3" :responsive="false">
    <!-- Always 3 columns, even on mobile -->
</neura::grid>

Gap Sizes

Customize spacing between elements with the gap attribute:

None (gap-0)

Item 1
Item 2
Item 3

Small (gap-2)

Item 1
Item 2
Item 3

Medium (gap-4) - Default

Item 1
Item 2
Item 3

Large (gap-6)

Item 1
Item 2
Item 3

Extra Large (gap-8)

Item 1
Item 2
Item 3
<neura::grid cols="3" gap="none">...</neura::grid>
<neura::grid cols="3" gap="xs">...</neura::grid>
<neura::grid cols="3" gap="sm">...</neura::grid>
<neura::grid cols="3" gap="md">...</neura::grid>
<neura::grid cols="3" gap="lg">...</neura::grid>
<neura::grid cols="3" gap="xl">...</neura::grid>

Custom Column Counts

You can use any number of columns (7, 8, 12, etc.) and the grid will automatically generate responsive classes:

8 Columns

1
2
3
4
5
6
7
8

12 Columns

1
2
3
4
5
6
7
8
9
10
11
12
<neura::grid cols="8">...</neura::grid>
<neura::grid cols="12">...</neura::grid>
<!-- Any number works! -->

Auto-Fit & Auto-Fill

Use CSS Grid auto functions for flexible, responsive layouts that adapt to content:

Auto-Fit

Item 1
Item 2
Item 3
Item 4

Auto-Fill

Item 1
Item 2
Item 3

Auto

Auto
Content-based width
Fits content
<neura::grid cols="auto-fit">...</neura::grid>
<neura::grid cols="auto-fill">...</neura::grid>
<neura::grid cols="auto">...</neura::grid>

Custom Breakpoints

Customize the number of columns at each breakpoint (sm, md, lg) for fine-grained control:

Custom Breakpoints Example

1
2
3
4
5
6
This grid shows: 1 column on mobile (sm), 3 columns on tablet (md), and 6 columns on desktop (lg). 
<neura::grid cols="6" :sm="1" :md="3" :lg="6">
    <!-- Mobile: 1 col, Tablet: 3 cols, Desktop: 6 cols -->
</neura::grid>

Alignment

Control how items are aligned within the grid using align and justify properties:

Align: Start

Item 1
Item 2
Item 3

Align: Center

Item 1
Item 2
Item 3

Align: End

Item 1
Item 2
Item 3
<neura::grid cols="3" align="start">...</neura::grid>
<neura::grid cols="3" align="center">...</neura::grid>
<neura::grid cols="3" align="end">...</neura::grid>
<neura::grid cols="3" align="stretch">...</neura::grid>

Advanced: Column Positioning

Use colStart and colEnd to position specific grid items:
Spans 2 columns
Item 2
Item 3
Item 4
<neura::grid cols="4" :colStart="1" :colEnd="3">
    <!-- Grid starts at column 1 and ends at column 3 -->
</neura::grid>

Combined Examples

Combine multiple properties for complex layouts:

Complex Grid with All Props

1
2
3
4
5
6
<neura::grid 
    cols="6" 
    gap="lg" 
    align="center" 
    justify="start" 
    :sm="2" 
    :md="4" 
    :lg="6">
    <!-- Complex responsive grid -->
</neura::grid>

Use Cases

Card Grid

Card 1

Content for card 1

Card 2

Content for card 2

Card 3

Content for card 3

Form Fields

Best Practices

✓ Do

  • Use default responsive behavior for better mobile experience
  • Choose an appropriate gap based on content and design
  • Use grids to organize content consistently
  • Combine with other components (cards, inputs, etc.) for complex layouts

✗ Don't

  • Don't use too many columns on mobile (responsive handles it)
  • Don't forget to adjust gap based on content
  • Don't use fixed grids (responsive="false") unless necessary

Properties

Property Type Default Description
cols string|number '1' Number of columns. Values: '1'-'6', any number (7+), 'auto', 'auto-fit', 'auto-fill', or custom CSS
gap string 'md' Spacing between elements. Values: 'none', 'xs', 'sm', 'md', 'lg', 'xl'
responsive bool true Enable responsive behavior (mobile: 1 column, tablet: 2, desktop: specified number)
sm number|null null Number of columns at sm breakpoint (auto-calculated if null)
md number|null null Number of columns at md breakpoint (auto-calculated if null)
lg number|null null Number of columns at lg breakpoint (defaults to cols value if null)
align string 'stretch' Vertical alignment. Values: 'start', 'center', 'end', 'stretch'
justify string 'stretch' Horizontal alignment. Values: 'start', 'center', 'end', 'stretch'
colStart number|null null Starting column position for the grid container
colEnd number|null null Ending column position for the grid container