Responsive Layout Demo
Showcasing the responsive grid system and layout components
Responsive Grid System
The grid automatically adapts to different screen sizes
Basic Grid (1-2-3-4 columns)
Item 1
Responsive grid item
Item 2
Responsive grid item
Item 3
Responsive grid item
Item 4
Responsive grid item
Item 5
Responsive grid item
Item 6
Responsive grid item
Item 7
Responsive grid item
Item 8
Responsive grid item
Grid with Spanning Items
Featured Item
Spans 2 columns on medium screens and above
Regular Item
Single column
Regular Item
Single column
Wide Item
Spans full width on mobile, 3 columns on medium, 2 on large
Container Sizes
Different container sizes for various content types
Small Container (max-w-2xl)
Perfect for focused content like articles or forms
Medium Container (max-w-4xl)
Good for content with sidebars or moderate width requirements
Large Container (max-w-6xl)
Suitable for dashboards and content-heavy pages
Extra Large Container (max-w-7xl)
Maximum width for full-featured layouts and wide content
Mobile Navigation
The header includes a responsive mobile navigation menu. Try resizing your browser or viewing on mobile to see the hamburger menu.
Features:
- • Hamburger menu on mobile and tablet
- • Smooth transitions and animations
- • Keyboard navigation support
- • Backdrop click to close
- • Escape key to close
- • Prevents body scroll when open