🎯 Layout System

Master responsive design with Aki UI's powerful Grid, Stack, and Breakpoint components. Build layouts that look perfect on every device.

Grid System

Create flexible, responsive grid layouts with automatic column sizing and gap management.

Learn Grid →

Stack Components

Organize elements in horizontal or vertical stacks with intelligent spacing and alignment.

Learn Stack →

Breakpoints

Responsive utilities and hooks for building adaptive interfaces across all screen sizes.

Learn Breakpoints →

🔥 Grid System Examples

Auto-Responsive Grid

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4

Asymmetric Layout

Main Content (2/3)

This area takes up 2/3 of the width on large screens

Sidebar (1/3)

Sidebar content

grid-cols-1 lg:grid-cols-3 + lg:col-span-2

📚 Stack Layout Examples

Vertical Stack

Header
Navigation
Main Content
Footer
<Stack direction="vertical" spacing={3}>

Horizontal Stack

Button 1
Button 2
Button 3
<Stack direction="horizontal" spacing={3}>

📱 Responsive Breakpoints

Interactive Breakpoint Demo

Base
0px+
Mobile
SM
640px+
Tablet
MD
768px+
Small Desktop
LG
1024px+
Desktop

Breakpoint Hooks

const isMobile = useBreakpoint('md', 'down');
const isTablet = useBreakpoint('md', 'up') && useBreakpoint('lg', 'down');
const isDesktop = useBreakpoint('lg', 'up');

// Responsive utilities
<Show above="md">Desktop content</Show>
<Show below="md">Mobile content</Show>

💡 Best Practices

Do

  • • Use consistent spacing across components
  • • Start with mobile-first design
  • • Leverage grid auto-placement
  • • Use Stack for simple linear layouts
  • • Test on multiple screen sizes

Don't

  • • Nest grids unnecessarily deep
  • • Use fixed pixel values for breakpoints
  • • Override too many default styles
  • • Ignore performance on complex layouts
  • • Forget accessibility considerations

🚀 Ready to Build Amazing Layouts?

Start using Aki UI's layout system today and create responsive designs that work everywhere.

Get StartedView All Components