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 |