Layout Component
Display Modes
Flex Mode (default)
Item 1
Item 2
Item 3
Item 4
Grid Mode
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
None Mode (plain div)
Plain content 1
Plain content 2
Plain content 3
Flex Layouts
Horizontal with Wrap
1
2
3
4
5
Vertical Column
Top
Middle
Bottom
Centered Content
A
B
C
Space Between
Start
Middle
End
Grid Layouts
2 Columns Grid
1
2
3
4
4 Columns Grid
1
2
3
4
5
6
7
8
3×2 Grid (Rows × Cols)
1
2
3
4
5
6
Centered Grid Items
A
B
C
D
Responsive Layouts
Responsive Grid (1 → 2 → 3 → 4 columns)
Try resizing your browser: 1 col on mobile, 2 on tablet, 3 on desktop, 4 on xl screens
01
02
03
04
05
06
07
08
Responsive Flex (Column → Row)
Column on mobile, row on desktop
Header
Content
Footer
Responsive Gap & Padding
Small spacing on mobile, larger on desktop
1
2
3
4
5
6
Advanced Examples
Dashboard Layout
Header
Sidebar
Main Content
Footer
Card Grid with Custom Styling
Card 1
Content here
Card 2
Content here
Card 3
Content here
Auto-fit Grid (Responsive without breakpoints)
Using autoCols for automatic responsive layout
Auto 1
Auto 2
(taller)
(taller)
Auto 3
Auto 4
Auto 5